修改bug

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2023-12-27 19:47:27
+ * @LastEditTime: 2023-12-29 16:28:26
  * @LastEditors: zhp
  * @Description:
 -->
@@ -93,54 +93,50 @@ export default {
     initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
       // console.log(1)
       this.chart = echarts.init(document.getElementById(this.id))
-      let series = [{
-        name: '成品面积',
-        type: 'bar',
-        stack: 'total',
-        // label: {
-        //   show: true
-        // },
-        emphasis: {
-          focus: 'series'
+      let series = [
+        {
+          // 辅助系列
+          name: '良品',
+          type: 'bar',
+          stack: 'total',
+          // silent: true,
+          // itemStyle: {
+            color: '#0fdedb',
+          // },
+          barWidth: 10,
+          data: passRateList
         },
-        data: passRateList,
-        itemStyle: {
-          normal: { color: '#2359ec' }
+        {
+          type: 'bar',
+          stack: 'total',
+          name: '废品',
+          data: wasteList,
+          barWidth: 10,
+          // barWidth: 15,
+          // label: {
+          //   position: [10, 10],
+          //   normal: {
+          //     position: [800, -24],
+          //     show: true,
+          //     textStyle: {
+          //       color: '#2359ec',
+          //       fontSize: 16,
+          //     },
+          //   },
+          // },
         }
-      },
-      {
-        name: '废片面积',
-        type: 'bar',
-        stack: 'total',
-        // label: {
-        //   show: true
-        // },
-        emphasis: {
-          focus: 'series'
-        },
-        barWidth: 12,
-        data: wasteList,
-        itemStyle: {
-          normal: { color: '#745fe4' }
-        }
-      },]
+      ]
       // for (i = 0; i < 5; i++) {
       //   series.push({
 
       //   })
       // }
-      const yAxisDataLeft = topNameList;
-      // const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
-      const yAxisDataRight = nameWasteList
       this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            // Use axis to trigger tooltip
-            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+        legend: {
+          textStyle: {
+            color: '#ffffff'
           }
         },
-        // legend: {},
         grid: {
           left: '3%',
           right: '4%',
@@ -149,73 +145,38 @@ export default {
           height: 'auto',
           containLabel: true
         },
-        xAxis: {
-          type: 'value',
-          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-          axisTick: {
-            show: false // 不显示坐标轴刻度线
-          },
-          axisLine: {
-            show: false, // 不显示坐标轴线
-          },
-          axisLabel: {
-            show: false, // 不显示坐标轴上的文字
-          },
-          splitLine: {
-            show: false // 不显示网格线
-          },
-        },
         yAxis: [
           {
+            type: 'category',
             inverse: true,
-            data: yAxisDataLeft,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
             axisLabel: {
               show: true,
               inside: true,
+              interval: 0, //横轴信息全部显
+              splitNumber: 50,
+              // boundaryGap: [20, 20],
               textStyle: {
                 color: '#ffffff',
+                verticalAlign: 'bottom',
                 fontSize: 12,
                 align: 'left',
-              },
-              formatter: '{value}\n{a|占位}\n{a|占位}',
-              rich: {
-                a: {
-                  color: 'transparent',
-                  lineHeight: 24,
-                }
+                padding: [0, 0, 15, -5]
               }
             },
-            //offset: 30,
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            }
+            data: topNameList
           },
           {
-            inverse: false,
-            data: yAxisDataRight,
-            axisLabel: {
-              inside: true,
-              textStyle: {
-                color: '#ffffff',
-                fontSize: 12,
-                align: 'right',
-              },
-              formatter: '{value}\n{a|占位}\n{a|占位}',
-              rich: {
-                a: {
-                  color: 'transparent',
-                  lineHeight: 24,
-                  fontFamily: 'digital'
-                }
-              }
-            },
-            offset: 0,
+            type: 'category',
+            inverse: true,
             splitLine: {
               show: false
             },
@@ -224,10 +185,29 @@ export default {
             },
             axisLine: {
               show: false
-            }
+            },
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0, //横轴信息全部显
+              splitNumber: 50,
+              // boundaryGap: [20, 20],
+              textStyle: {
+                color: '#ffffff',
+                verticalAlign: 'bottom',
+                fontSize: 12,
+                align: 'right',
+                padding: [0, 0, 15, -5]
+              }
+            },
+            data: nameWasteList
           }
         ],
-        series: series
+        xAxis: {
+          // max: 120,
+          show: false,
+        },
+        series:series
       })
     }
   }