报表

src/views/report/components/bmLineBar.vue

@@ -21,7 +21,10 @@
         {{ item.name }}</span
       >
     </div>
-    <div id="main" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
+    <div
+      :id="chartId"
+      :style="{ width: '100%', height: chartHeight + 'px' }"
+    ></div>
   </div>
 </template>
 <script>
@@ -44,12 +47,13 @@ export default {
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "cross",
+            // type: "cross",
             crossStyle: {
               color: "rgba(237,237,237,0.5)",
             },
           },
           formatter: function (params) {
+            console.log(params);
             var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].name}</span>`;
             for (var i = 0, l = params.length; i < l; i++) {
               res +=
@@ -73,6 +77,12 @@ export default {
         },
         yAxis: {
           type: "value",
+          name: "",
+          nameTextStyle: {
+            fontSize: 12,
+            align: "right",
+          },
+          axisLabel: {},
         },
         series: [],
       },
@@ -91,6 +101,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    chartId: {
+      type: String,
+      default: "bmChart",
+    },
+    chartNum: {
+      type: Number,
+      default: 1,
+    },
   },
   watch: {
     chartHeight: {
@@ -98,7 +116,7 @@ export default {
         this.chartHeight = newVal;
       },
     },
-    isOpen(val) {
+    chartNum(val) {
       this.canvasReset();
     },
     chartMsg: {
@@ -108,22 +126,8 @@ export default {
       deep: true,
     },
   },
-  computed: {
-    isOpen() {
-      return this.$store.getters.sidebar.opened;
-    },
-  },
   mounted() {
     this.canvasReset();
-    window.addEventListener("resize", this.canvasReset);
-  },
-  beforeDestroy() {
-    if (this.chart) {
-      this.myChart.dispose();
-    }
-  },
-  destroyed() {
-    window.removeEventListener("resize", this.canvasReset);
   },
   methods: {
     canvasReset() {
@@ -134,12 +138,13 @@ export default {
     getMes() {
       if (this.myChart) {
         this.myChart.dispose();
-        this.myChart = "";
       }
-      var chartDom = document.getElementById("main");
+      var chartDom = document.getElementById(this.chartId);
       this.myChart = echarts.init(chartDom);
       this.option.color = this.chartMsg.color;
       this.option.xAxis.data = this.chartMsg.xData;
+      this.option.yAxis.name = this.chartMsg.yName;
+      this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
       this.option.series = this.chartMsg.series;
       this.myChart.setOption(this.option);
     },