样式微调

src/components/baozuo-demo2/CenterCmp.vue

@@ -217,90 +217,32 @@ export default {
   },
   // 在mounted()中调用
   mounted() {
-    this.createData();
     this.initRightChart();
     this.initGaugeCharts();
   },
   // 在methods中添加方法
   methods: {
-    createData() {
-      // 原始数据（每个柱子的总高度，单位：%）
-      const rawData = this.rightData.map(item=>{return item.value});
-      const categories = this.rightData.map(item=>{return item.name});
-
-      // 将数据按 10% 分段，生成堆叠数据
-      const generateStackData = (value) => {
-        const segments = [];
-        let remaining = value;
-        for (let i = 0; i < 10; i++) { // 最多分成 10 段（100%）
-          const segmentValue = remaining >= 10 ? 10 : remaining;
-          if (segmentValue <= 0) break;
-          segments.push(segmentValue);
-          remaining -= segmentValue;
-        }
-        return segments;
-      };
-
-      // 生成堆叠数据系列
-      const series = [];
-      for (let i = 0; i < 10; i++) { // 最多 10 个堆叠层
-        series.push({
-          type: 'bar',
-          stack: 'total', // 堆叠组名
-          data: rawData.map(value => {
-            const segments = generateStackData(value);
-            return i < segments.length ? segments[i] : 0; // 超出分段返回 0
-          }), // 替换为你的数据
-          barWidth: '40%', // 设置柱状图宽度为 40% 的可用空间,
-          itemStyle: {
-            color: `rgba(135, 206, 235, ${i * 0.1+0.2})`, // 从下往上透明度变化,
-            borderColor: 'transparent',
-            borderWidth: 3,
-          },
-          barGap: '0%', // 柱子间无间隔
-          barCategoryGap: '20%' // 类目间留间隙
-        });
-      }
-      var myChart = echarts.init(document.getElementById('echarts-new'));
-        this.option = {
-          xAxis: {
-          type: 'category',
-          data: categories,
-          axisLabel: {
-            fontSize: 23, // 设置 Y 轴字体大小
-            color: '#fff', // 可选：设置字体颜色
-            fontWight:'bold',
-            interval: 0 // 强制显示所有标签
-          },
-
-        },
-        yAxis: {
-          type: 'value',
-          max: 100,
-          axisLine: { show: true },
-          splitLine: {
-            show: false, // 显示 y 轴辅助线
-          },
-          axisLabel: {
-            fontSize: 25, // 设置 Y 轴字体大小
-            color: '#fff', // 可选：设置字体颜色
-            fontWight:'bold',
-            formatter: '{value}%'  // 在每一个值后面添加 %
-          },
-        },
-        series: series
-        }
-      myChart.setOption(this.option);
-    },
     // 修改柱状图y轴配置
     initRightChart() {
     const chart = echarts.init(document.getElementById('right-echarts-new'));
     const option = {
+      legend: {
+            icon: 'rect',
+            itemWidth: 20,
+            itemHeight: 20,
+            itemGap: 40,
+            data: ['合格率目标'],
+            textStyle: {
+              color: '#fff',
+              fontSize: 20,
+              fontWight:'bold'
+            }
+          },
       grid: {
-        top: '10%',
+        top: '15%',
         left: '5%',
         right: '5%',
-        bottom: '5%',
+        bottom: '0%',
         containLabel: true
       },
       xAxis: {
@@ -308,7 +250,7 @@ export default {
         data: this.rightChartData.map(item => item.name),
         axisLabel: {
           color: '#fff',
-          fontSize: 16,
+          fontSize: 20,
           rotate: 30
         },
         axisLine: {
@@ -354,7 +296,22 @@ export default {
           color: '#fff',
           fontSize: 18
         }
-      }]
+        },
+        // 添加合格率目标折线
+        {
+            name: '合格率目标',
+            type: 'line',
+            data: [98, 98, 98, 98, 98, 98,98],
+            symbolSize: 10,
+            itemStyle: {
+              color: '#FFA500' // 橙色折线
+            },
+            lineStyle: {
+              width: 3,
+              type: 'solid'
+            }
+          }
+      ]
     };
     chart.setOption(option);
     },
@@ -367,6 +324,7 @@ export default {
     this.initGaugeChart('gauge-chart-3', this.middleTopData.wholePassRate);
     },
     // 修改仪表盘样式部分
+    // 修改initGaugeChart方法
     initGaugeChart(id, value) {
         const chart = echarts.init(document.getElementById(id));
         const option = {
@@ -396,7 +354,7 @@ export default {
               width: 10,
               offsetCenter: [0, '-40%'],
               itemStyle: {
-                color: '#fff'
+                color: value < 90 ? '#FF0000' : '#fff' // 低于90显示深蓝色，否则白色
               }
             },
             axisTick: {
@@ -436,7 +394,7 @@ export default {
 #right-echarts-new {
   width: 100%;
   padding: 40px 20px 0 0;
-  height: calc(100% - 120px);
+  height: calc(100% - 80px);
 }
 #left-rankchart {
   width: 100%;
@@ -481,7 +439,8 @@ export default {
         top: 50%;
         transform: translateY(-50%);
         color: #fff;
-        font-size: 16px;
+        font-size: 20px;
+        font-weight: bold;
       }
     }
   }
@@ -511,14 +470,14 @@ export default {
     justify-content: center;
     
     .inspection-title {
-      font-size: 25px;
+      font-size: 28px;
       color: #fff;
       font-weight: bold;
       margin-bottom: 10px;
     }
     
     .inspection-value {
-      font-size: 36px;
+      font-size: 40px;
       color: #08e5ff;
       font-weight: bold;
     }

src/components/baozuo-demo2/LeftChart1.vue

@@ -43,9 +43,19 @@ export default {
   },
   methods: {
     createData() {
-
+      const dates = getCurrentMonthDates();
+      const today = new Date();
+      const currentDay = today.getDate();
+      
+      // 生成模拟数据，未到日期的值为0
+      const generateData = () => {
+        return dates.map((date, index) => {
+          const day = parseInt(date.split('-')[1]);
+          return day <= currentDay ? (Math.random() * 10).toFixed(2) : 0;
+        });
+      };
+  
       var myChart = echarts.init(document.getElementById(this.pieId));
-      console.log(myChart)
       this.option = {
         title: {
           // text: '本月不良率推移图',
@@ -124,7 +134,7 @@ export default {
                   name: '反白',
                   type: 'line',
                   smooth: true,
-                  data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
+                  data: generateData(),
                   lineStyle: { width: 4 },
                   symbolSize: 12,
               },

src/components/baozuo-demo2/LeftChart2.vue

@@ -48,7 +48,7 @@ export default {
     },
   createData() {
       // 模拟数据（每个柱子的总高度，单位：%）
-      const rawData = [85, 92, 78, 95, 88, 90]; // P1-P6的合格率数据
+      const rawData = [95, 92, 98, 95, 98, 90]; // P1-P6的合格率数据
 
       // 将数据按 10% 分段，生成堆叠数据
       const generateStackData = (value) => {
@@ -126,7 +126,7 @@ export default {
           {
             name: '合格率目标',
             type: 'line',
-            data: [80, 85, 83, 77, 85, 79],
+            data: [98, 98, 98, 98, 98, 98],
             symbolSize: 10,
             itemStyle: {
               color: '#FFA500' // 橙色折线

src/components/baozuo-demo2/pieChart.vue

@@ -73,6 +73,7 @@
         this.option = {
             title: {
                 text: '本月不良指标数',
+                top: '0',
                 left: 'center',
                 textStyle: {
                     color: '#fff',
@@ -87,7 +88,7 @@
                 splitNumber: 4,
                 axisName: {
                     color: '#fff',
-                    fontSize: 20  // 从14px修改为20px
+                    fontSize: 25  // 从14px修改为20px
                 },
                 splitArea: {
                     show: false,