1

src/components/rank/components/customer.vue

@@ -3,29 +3,21 @@
 </template>
 
 <script>
-import echarts from 'echarts';
-
-export default {
+  import echarts from 'echarts';
+  export default {
     name: 'CustomChart',
     data() {
       return {
         chart: null,
         barData: {
           name: '新增同业数',
-                data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199, 125, 291, 187, 92, 243, 148, 212, 117, 279, 103, 137, 256, 221, 193, 88, 283, 165, 111, 239, 107],
+          data: [],
         },
         lineData: {
           name: '新增激活数',
-                data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
-            },
-            xAxisData: [
-    '11/01', '11/02', '11/03', '11/04', '11/05',
-    '11/06', '11/07', '11/08', '11/09', '11/10',
-    '11/11', '11/12', '11/13', '11/14', '11/15',
-    '11/16', '11/17', '11/18', '11/19', '11/20',
-    '11/21', '11/22', '11/23', '11/24', '11/25',
-    '11/26', '11/27', '11/28', '11/29', '11/30'
-],
+          data: [],
+        },
+        xAxisData: [],
         unit: '人',
 
       };
@@ -36,12 +28,22 @@ export default {
         default: null
       }
     },
-    mounted() {
+    watch: {
+      chartData: function (old, val) {
         if (this.chartData) {
-            this.barData = this.chartData.barData;
-            this.lineData = this.chartData.lineData;
+          this.barData.data = this.chartData.customerYData;
+          this.lineData.data = this.chartData.activationYData;
+          this.xAxisData = this.chartData.xData;
+        }
+        this.initChart();
+      }
+    },
+    mounted() {
       this.unit = this.chartData.unit;
-            this.xAxisData = this.chartData.xAxisData;
+      if (this.chartData) {
+        this.barData.data = this.chartData.customerYData;
+        this.lineData.data = this.chartData.activationYData;
+        this.xAxisData = this.chartData.xData;
       }
       this.initChart();
     },
@@ -49,7 +51,6 @@ export default {
       initChart() {
         const chartDom = document.getElementById('chart');
         this.chart = echarts.init(chartDom);
-
         const option = {
           tooltip: {
             trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
@@ -122,8 +123,7 @@ export default {
               formatter: '{value} ' + this.unit,
             },
           },
-                series: [
-                    {
+          series: [{
               name: this.barData.name,
               type: 'bar',
               barWidth: 20,
@@ -152,16 +152,6 @@ export default {
         };
 
         this.chart.setOption(option);
-
-            // this.chart.on('mouseover', (params) => {
-            //     console.log(params);
-            //     this.setOpacity(params.seriesName);
-            // });
-
-            // // 监听鼠标离开事件
-            // this.chart.on('mouseout', () => {
-            //     this.setOpacity('');
-            // });
       },
       setOpacity(seriesName) {
         const option = this.chart.getOption();
@@ -199,12 +189,14 @@ export default {
         this.chart.dispose();
       }
     },
-};
+  };
+
 </script>
 
 <style scoped>
-#chart {
+  #chart {
     width: 100%;
     height: 100%;
-}
+  }
+
 </style>