优化图表

web/src/views/chartcustomization/components/chart.vue

@@ -49,63 +49,38 @@
       },
       chartSettingsTitle: {
         deep: true,
-        handler: 'init' // 直接将方法名指定为 handler
+        handler: 'upDateMyChart' // 直接将方法名指定为 handler
       },
       chartSettingsLegend: {
         deep: true,
-        handler: 'init' // 直接将方法名指定为 handler
+        handler: 'upDateMyChart' // 直接将方法名指定为 handler
       },
       chartSettingsXAxis:{
         deep: true,
-        handler: 'init' // 直接将方法名指定为 handler
+        handler: 'upDateMyChart' // 直接将方法名指定为 handler
       },
       chartSettingsYAxis:{
         deep: true,
-        handler: 'init' // 直接将方法名指定为 handler
+        handler: 'upDateMyChart' // 直接将方法名指定为 handler
       },
       chartSettingsSeries:{
         deep: true,
-        handler: 'init' // 直接将方法名指定为 handler
+        handler: 'upDateMyChart' // 直接将方法名指定为 handler
       },
       chartSettingsDataZoom:{
         deep: true,
-        handler: 'init' // 直接将方法名指定为 handler
+        handler: 'upDateMyChart' // 直接将方法名指定为 handler
       },
     },
     computed: {
       ...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom','dataSet']),
     },
     methods: {
-      deleteData(item){
-        // console.log(this.dataSet.yAxis)
-        let that = this
-        const updatedList = this.dataSet.yAxis.filter(d => d.name !== item.name);
-        this.dataSet.yAxis= updatedList
-        this.$store.commit('charts/updateDataSet',this.dataSet);
-      },
-      addPointSetting(series){
-        for (var i = 0; i < series.length; i++) {
-          for (var key in this.chartSettingsSeries) {
-            series[i][key] = this.chartSettingsSeries[key];
-          }
-        }
-      },
-      addLineSetting(series){
-        for (var i = 0; i < series.length; i++) {
-          for (var key in this.chartSettingsSeries) {
-            if(key=="smooth" || key == "lineStyle"){
-              series[i][key] = this.chartSettingsSeries[key];
-            }
-          }
-        }
-      },
-      init(){
-        if(this.myChart!=null){
-          this.myChart.dispose();
+      upDateMyChart(){
+        if(this.myChart==null){
+          this.init()
         }
-
         let that = this
-        this.myChart = echarts.init(this.$refs.chart)
         const setOption={};
         setOption.title = this.chartSettingsTitle
         setOption.legend = this.chartSettingsLegend
@@ -114,7 +89,7 @@
         setOption.xAxis.data=this.dataSet.xAxis.list
         // setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
         setOption.dataZoom = this.chartSettingsDataZoom
-        let data = this.dataSet.yAxis
+
 
         for(var i in this.dataSet.yAxis){
           this.dataSet.yAxis[i].data = this.dataSet.yAxis[i].list
@@ -131,10 +106,40 @@
         }
         this.addLineSetting(setOption.series)
 
-        this.myChart.setOption(setOption);
+        that.myChart.setOption(setOption);
         window.addEventListener("resize", () => {
-          this.myChart.resize();
+          that.myChart.resize();
         });
+      },
+      deleteData(item){
+        // console.log(this.dataSet.yAxis)
+        let that = this
+        const updatedList = this.dataSet.yAxis.filter(d => d.name !== item.name);
+        this.dataSet.yAxis= updatedList
+        this.$store.commit('charts/updateDataSet',this.dataSet);
+      },
+      addPointSetting(series){
+        for (var i = 0; i < series.length; i++) {
+          for (var key in this.chartSettingsSeries) {
+            series[i][key] = this.chartSettingsSeries[key];
+          }
+        }
+      },
+      addLineSetting(series){
+        for (var i = 0; i < series.length; i++) {
+          for (var key in this.chartSettingsSeries) {
+            if(key=="smooth" || key == "lineStyle"){
+              series[i][key] = this.chartSettingsSeries[key];
+            }
+          }
+        }
+      },
+      init(){
+        if(this.myChart!=null){
+          this.myChart.dispose();
+        }
+        this.myChart = echarts.init(this.$refs.chart)
+        this.upDateMyChart()
       }
     }
   }