优化绘图部分

src/views/charts/echarts.vue

@@ -32,14 +32,10 @@
                 chartPie: null
             }
         },
-        mounted: function () {
-            var _this = this;
-            //基于准备好的dom，初始化echarts实例
-            this.chartColumn = echarts.init(document.getElementById('chartColumn'));
-            this.chartBar = echarts.init(document.getElementById('chartBar'));
-            this.chartLine = echarts.init(document.getElementById('chartLine'));
-            this.chartPie = echarts.init(document.getElementById('chartPie'));
 
+        methods: {
+            drawColumnChart() {
+                this.chartColumn = echarts.init(document.getElementById('chartColumn'));
                 this.chartColumn.setOption({
                   title: { text: 'Column Chart' },
                   tooltip: {},
@@ -53,7 +49,9 @@
                       data: [5, 20, 36, 10, 10, 20]
                     }]
                 });
-
+            },
+            drawBarChart() {
+                this.chartBar = echarts.init(document.getElementById('chartBar'));
                 this.chartBar.setOption({
                     title: {
                         text: 'Bar Chart',
@@ -95,7 +93,9 @@
                         }
                     ]
                 });
-
+            },
+            drawLineChart() {
+                this.chartLine = echarts.init(document.getElementById('chartLine'));
                 this.chartLine.setOption({
                     title: {
                         text: 'Line Chart'
@@ -141,7 +141,9 @@
                         }
                     ]
                 });
-
+            },
+            drawPieChart() {
+                this.chartPie = echarts.init(document.getElementById('chartPie'));
                 this.chartPie.setOption({
                     title: {
                         text: 'Pie Chart',
@@ -180,10 +182,22 @@
                         }
                     ]
                 });
-        }
+            },
+            drawCharts() {
+                this.drawColumnChart()
+                this.drawBarChart()
+                this.drawLineChart()
+                this.drawPieChart()
+            },
+        },
 
+        mounted: function () {
+            this.drawCharts()
+        },
+        updated: function () {
+            this.drawCharts()
+        }
     }
-
 </script>
 
 <style scoped>