refine echarts demo

src/components/Charts/keyboard.vue

@@ -2,18 +2,9 @@
     <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    // 引入柱状图
-    require('echarts/lib/chart/bar');
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
+   import echarts from 'echarts';
 
-    require('echarts/lib/component/visualMap');
    export default {
-      name: 'barPercent',
      props: {
        className: {
          type: String,
@@ -33,13 +24,22 @@
        }
      },
      data() {
-        return {};
+       return {
+         chart: null
+       };
      },
      mounted() {
-        this.initBar();
+       this.initChart();
+     },
+     beforeDestroy() {
+       if (!this.chart) {
+         return
+       }
+       this.chart.dispose();
+       this.chart = null;
      },
      methods: {
-        initBar() {
+       initChart() {
          this.chart = echarts.init(document.getElementById(this.id));
 
          const xAxisData = [];

src/components/Charts/keyboard2.vue

@@ -2,18 +2,9 @@
     <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    // 引入柱状图
-    require('echarts/lib/chart/bar');
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
+  import echarts from 'echarts';
 
-    require('echarts/lib/component/visualMap');
   export default {
-      name: 'barPercent',
     props: {
       className: {
         type: String,
@@ -33,13 +24,22 @@
       }
     },
     data() {
-        return {};
+      return {
+        chart: null
+      };
     },
     mounted() {
-        this.initBar();
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose();
+      this.chart = null;
     },
     methods: {
-        initBar() {
+      initChart() {
         this.chart = echarts.init(document.getElementById(this.id));
 
         const xAxisData = [];

src/components/Charts/lineMarker.vue

@@ -2,16 +2,9 @@
     <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
+  import echarts from 'echarts';
 
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
-    require('echarts/lib/component/legend');
   export default {
-      name: 'barPercent',
     props: {
       className: {
         type: String,
@@ -31,11 +24,20 @@
       }
     },
     data() {
-        return {};
+      return {
+        chart: null
+      };
     },
     mounted() {
       this.initChart();
     },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
     methods: {
       initChart() {
         this.chart = echarts.init(document.getElementById(this.id));
@@ -215,5 +217,5 @@
         })
       }
     }
-    }
+}
 </script>

src/components/Charts/mixchart.vue

@@ -2,17 +2,9 @@
     <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    require('echarts/lib/chart/bar');
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
-    require('echarts/lib/component/legend');
-    require('echarts/lib/component/dataZoom');
+  import echarts from 'echarts';
+
   export default {
-      name: 'barPercent',
     props: {
       className: {
         type: String,
@@ -32,10 +24,20 @@
       }
     },
     data() {
-        return {};
+      return {
+        chart: null
+      };
     },
     mounted() {
       this.initChart();
+      this.chart = null;
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose();
+      this.chart = null;
     },
     methods: {
       initChart() {

src/views/charts/keyboard.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboardChart height='100%' width='100%' />
+      <keyboard-chart height='100%' width='100%'></keyboard-chart>
     </div>
   </div>
 </template>

src/views/charts/keyboard2.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboardChart2 id='apple' height='100%' width='100%' />
+      <keyboard-chart2 id='apple' height='100%' width='100%'></keyboard-chart2>
     </div>
   </div>
 </template>

src/views/charts/line.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <lineMarker height='100%' width='100%' />
+      <line-marker height='100%' width='100%'></line-marker>
     </div>
   </div>
 </template>

src/views/charts/mixchart.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <mixchart id='apple' height='100%' width='100%' />
+      <mix-chart id='apple' height='100%' width='100%'></mix-chart>
     </div>
   </div>
 </template>
 
 <script>
-    import mixchart from 'components/Charts/mixchart';
+    import mixChart from 'components/Charts/mixChart';
     export default {
-      components: { mixchart }
+      components: { mixChart }
     };
 </script>