修改

src/views/OperationalOverview/components/pileBarChart.vue

@@ -0,0 +1,235 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-12-27 13:54:52
+ * @LastEditTime: 2023-12-27 19:47:27
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'linearBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    borderRadius: {
+      type: Array,
+      default: () => [9, 9, 0, 0]
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    // nameList: {
+    //   type: Array,
+    //   default: () => []
+    // },
+    // dataList: {
+    //   type: Array,
+    //   default: () => []
+    // }
+  },
+  data() {
+    return {
+      chart: null,
+      nameList: [],
+      series: [{
+        type: 'bar',
+        data: [],
+        barWidth: 6
+
+      }]
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    // console.log('borderRadius: ', this.borderRadius)
+    // console.log('33333', this.dataList)
+    // let arr = []
+    // this.dataList.forEach(ele => {
+      // console.log(ele);
+    // this.series = []
+    this.initChart()
+    // this.$nextTick(() => {
+    //   // this.initChart()
+    // })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    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'
+        },
+        data: passRateList,
+        itemStyle: {
+          normal: { color: '#2359ec' }
+        }
+      },
+      {
+        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: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          width: 'auto',
+          height: 'auto',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          },
+        },
+        yAxis: [
+          {
+            inverse: true,
+            data: yAxisDataLeft,
+            axisLabel: {
+              show: true,
+              inside: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 12,
+                align: 'left',
+              },
+              formatter: '{value}\n{a|占位}\n{a|占位}',
+              rich: {
+                a: {
+                  color: 'transparent',
+                  lineHeight: 24,
+                }
+              }
+            },
+            //offset: 30,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          {
+            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,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        series: series
+      })
+    }
+  }
+}
+</script>