修改bug

src/views/OperationalOverview/components/ISRAChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-01-29 13:45:56
- * @LastEditTime: 2024-01-29 14:56:38
+ * @LastEditTime: 2024-02-18 14:20:01
  * @LastEditors: zhp
  * @Description:
 -->
@@ -85,11 +85,11 @@ export default {
 					},
 				},
 				legend: {
-					bottom: '2%',
+					bottom: '10%',
 					left: 'center',
-					itemWidth: 18,
-					itemHeight:18,
-					icon: 'circle',
+					itemWidth: 20,
+					itemHeight:12,
+          icon: 'rect',
 					textStyle: {
 						color: '#fff'
 					},

src/views/OperationalOverview/components/baseContainer/index.vue

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2022-01-19 15:58:17
  * @LastEditors: zhp
- * @LastEditTime: 2024-02-01 15:25:14
+ * @LastEditTime: 2024-02-20 15:25:02
  * @Description: file content
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
@@ -162,6 +162,8 @@ export default {
   width: 100%;
   // background-color: rgba($color: #061027, $alpha: 0.15);
   position: relative;
+  // filter: blur(.5px);
+  opacity: calc(.8);
   // border: 2px solid;
     // background: url('../../../../assets/img/energy.png') no-repeat;
     // background-size: 100% 100%;
@@ -272,4 +274,9 @@ export default {
     border: none;
   }
 }
+// .base-container::after{
+//     z-index: -1;
+//       width: 100%;
+//       filter: blur(2px);
+// }
 </style>

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2024-01-25 14:08:27
+ * @LastEditTime: 2024-02-21 14:38:54
  * @LastEditors: zhp
  * @Description:
 -->
@@ -91,43 +91,78 @@ export default {
   },
   methods: {
     initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
+      let rawData = []
+      rawData.push(passRateList,wasteList)
       // console.log(1)
-      this.chart = echarts.init(document.getElementById(this.id))
-      let series = [
-        {
-          // 辅助系列
-          name: '良品',
-          type: 'bar',
-          stack: 'total',
-          // silent: true,
-          // itemStyle: {
-            color: '#0fdedb',
-          // },
-          // barCategoryGap: '10%',
-          barWidth: 10,
-          data: passRateList
-        },
-        {
-          type: 'bar',
-          stack: 'total',
-          name: '废品',
-          // barCategoryGap: '10%',
-          data: wasteList,
-          // barWidth: 10,
-          // barWidth: 15,
-          // label: {
-          //   position: [10, 10],
-          //   normal: {
-          //     position: [800, -24],
-          //     show: true,
-          //     textStyle: {
-          //       color: '#2359ec',
-          //       fontSize: 16,
-          //     },
-          //   },
-          // },
+      const totalData = [];
+      for (let i = 0; i < rawData[0].length; ++i) {
+        let sum = 0;
+        for (let j = 0; j < rawData.length; ++j) {
+          sum += rawData[j][i];
         }
-      ]
+        totalData.push(sum);
+      }
+      let colors = ['#0fdedb', '#2359ec' ]
+      console.log('total', totalData);
+      this.chart = echarts.init(document.getElementById(this.id))
+      const series = [
+        '良品',
+        '废品',
+        // 'Affiliate Ad',
+        // 'Video Ad',
+        // 'Search Engine'
+      ].map((name, sid) => {
+        // console.log(sid)
+        return {
+          name,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 10,
+          label: {
+            show: true,
+            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+          },
+          color:colors[sid],
+          data: rawData[sid].map((d, did) =>
+            totalData[did] <= 0 ? 0 : d / totalData[did]
+          )
+        };
+      });
+      // let series = [
+      //   {
+      //     // 辅助系列
+      //     name: '良品',
+      //     type: 'bar',
+      //     stack: 'total',
+      //     // silent: true,
+      //     // itemStyle: {
+      //       color: '#0fdedb',
+      //     // },
+      //     // barCategoryGap: '10%',
+      //     barWidth: 10,
+      //     data: passRateList
+      //   },
+      //   {
+      //     type: 'bar',
+      //     stack: 'total',
+      //     name: '废品',
+      //     // barCategoryGap: '10%',
+      //     data: wasteList,
+      //     // barWidth: 10,
+      //     // barWidth: 15,
+      //     // label: {
+      //     //   position: [10, 10],
+      //     //   normal: {
+      //     //     position: [800, -24],
+      //     //     show: true,
+      //     //     textStyle: {
+      //     //       color: '#2359ec',
+      //     //       fontSize: 16,
+      //     //     },
+      //     //   },
+      //     // },
+      //   }
+      // ]
       // for (i = 0; i < 5; i++) {
       //   series.push({
 
@@ -137,6 +172,7 @@ export default {
         legend: {
           // top: '2.5%',
           // right: '20px',
+          icon: 'rect',
           textStyle: {
             color: '#ffffff'
           }