From 4b4bf494b0d38dcf17b89c95abc924a56c556455 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 30 Jun 2017 15:36:21 +0800
Subject: [PATCH] refine echarts demo

---
 src/components/Charts/keyboard.vue   | 208 +++++------
 src/components/Charts/keyboard2.vue  | 278 +++++++--------
 src/components/Charts/lineMarker.vue | 404 +++++++++++-----------
 src/components/Charts/mixchart.vue   | 500 ++++++++++++++-------------
 src/views/charts/keyboard.vue        |   2 +-
 src/views/charts/keyboard2.vue       |   2 +-
 src/views/charts/line.vue            |   2 +-
 src/views/charts/mixchart.vue        |   6 +-
 8 files changed, 703 insertions(+), 699 deletions(-)

diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 8b34976..71c0ffd 100644
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -2,111 +2,111 @@
     <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,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
-      },
-      data() {
-        return {};
-      },
-      mounted() {
-        this.initBar();
-      },
-      methods: {
-        initBar() {
-          this.chart = echarts.init(document.getElementById(this.id));
+   export default {
+     props: {
+       className: {
+         type: String,
+         default: 'chart'
+       },
+       id: {
+         type: String,
+         default: 'chart'
+       },
+       width: {
+         type: String,
+         default: '200px'
+       },
+       height: {
+         type: String,
+         default: '200px'
+       }
+     },
+     data() {
+       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));
 
-          const xAxisData = [];
-          const data = [];
-          for (let i = 0; i < 30; i++) {
-            xAxisData.push(i + '号');
-            data.push(Math.round(Math.random() * 2 + 3))
-          }
+         const xAxisData = [];
+         const data = [];
+         for (let i = 0; i < 30; i++) {
+           xAxisData.push(i + '号');
+           data.push(Math.round(Math.random() * 2 + 3))
+         }
 
-          this.chart.setOption(
-            {
-              backgroundColor: '#08263a',
-              tooltip: {
-                trigger: 'axis'
-              },
-              xAxis: {
-                show: false,
-                data: xAxisData
-              },
-              visualMap: {
-                show: false,
-                min: 0,
-                max: 50,
-                dimension: 0,
-                inRange: {
-                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-                }
-              },
-              yAxis: {
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  textStyle: {
-                    color: '#4a657a'
-                  }
-                },
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#08263f'
-                  }
-                },
-                axisTick: {}
-              },
-              series: [{
-                type: 'bar',
-                data,
-                name: '撸文数',
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: 5,
-                    shadowBlur: 10,
-                    shadowColor: '#111'
-                  }
-                },
-                animationEasing: 'elasticOut',
-                animationEasingUpdate: 'elasticOut',
-                animationDelay(idx) {
-                  return idx * 20;
-                },
-                animationDelayUpdate(idx) {
-                  return idx * 20;
-                }
-              }]
-            })
-        }
-      }
-    }
+         this.chart.setOption(
+           {
+             backgroundColor: '#08263a',
+             tooltip: {
+               trigger: 'axis'
+             },
+             xAxis: {
+               show: false,
+               data: xAxisData
+             },
+             visualMap: {
+               show: false,
+               min: 0,
+               max: 50,
+               dimension: 0,
+               inRange: {
+                 color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+               }
+             },
+             yAxis: {
+               axisLine: {
+                 show: false
+               },
+               axisLabel: {
+                 textStyle: {
+                   color: '#4a657a'
+                 }
+               },
+               splitLine: {
+                 show: true,
+                 lineStyle: {
+                   color: '#08263f'
+                 }
+               },
+               axisTick: {}
+             },
+             series: [{
+               type: 'bar',
+               data,
+               name: '撸文数',
+               itemStyle: {
+                 normal: {
+                   barBorderRadius: 5,
+                   shadowBlur: 10,
+                   shadowColor: '#111'
+                 }
+               },
+               animationEasing: 'elasticOut',
+               animationEasingUpdate: 'elasticOut',
+               animationDelay(idx) {
+                 return idx * 20;
+               },
+               animationDelayUpdate(idx) {
+                 return idx * 20;
+               }
+             }]
+           })
+       }
+     }
+   }
 </script>
diff --git a/src/components/Charts/keyboard2.vue b/src/components/Charts/keyboard2.vue
index 605d7c1..eb5cfb7 100644
--- a/src/components/Charts/keyboard2.vue
+++ b/src/components/Charts/keyboard2.vue
@@ -2,148 +2,148 @@
     <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,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
+  export default {
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      id: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '200px'
+      },
+      height: {
+        type: String,
+        default: '200px'
+      }
+    },
+    data() {
+      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));
+
+        const xAxisData = [];
+        const data = [];
+        const data2 = [];
+        for (let i = 0; i < 50; i++) {
+          xAxisData.push(i);
+          data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+          data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
         }
-      },
-      data() {
-        return {};
-      },
-      mounted() {
-        this.initBar();
-      },
-      methods: {
-        initBar() {
-          this.chart = echarts.init(document.getElementById(this.id));
-
-          const xAxisData = [];
-          const data = [];
-          const data2 = [];
-          for (let i = 0; i < 50; i++) {
-            xAxisData.push(i);
-            data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
-            data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
-          }
-          this.chart.setOption(
-            {
-              backgroundColor: '#08263a',
-              xAxis: [{
-                show: false,
-                data: xAxisData
-              }, {
-                show: false,
-                data: xAxisData
-              }],
-              visualMap: {
-                show: false,
-                min: 0,
-                max: 50,
-                dimension: 0,
-                inRange: {
-                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-                }
-              },
-              yAxis: {
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  textStyle: {
-                    color: '#4a657a'
-                  }
-                },
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#08263f'
-                  }
-                },
-                axisTick: {
-                  show: false
-                }
-              },
-              series: [{
-                name: 'back',
-                type: 'bar',
-                data: data2,
-                z: 1,
-                itemStyle: {
-                  normal: {
-                    opacity: 0.4,
-                    barBorderRadius: 5,
-                    shadowBlur: 3,
-                    shadowColor: '#111'
-                  }
-                }
-              }, {
-                name: 'Simulate Shadow',
-                type: 'line',
-                data,
-                z: 2,
-                showSymbol: false,
-                animationDelay: 0,
-                animationEasing: 'linear',
-                animationDuration: 1200,
-                lineStyle: {
-                  normal: {
-                    color: 'transparent'
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: '#08263a',
-                    shadowBlur: 50,
-                    shadowColor: '#000'
-                  }
-                }
-              }, {
-                name: 'front',
-                type: 'bar',
-                data,
-                xAxisIndex: 1,
-                z: 3,
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: 5
-                  }
-                }
-              }],
-              animationEasing: 'elasticOut',
-              animationEasingUpdate: 'elasticOut',
-              animationDelay(idx) {
-                return idx * 20;
-              },
-              animationDelayUpdate(idx) {
-                return idx * 20;
+        this.chart.setOption(
+          {
+            backgroundColor: '#08263a',
+            xAxis: [{
+              show: false,
+              data: xAxisData
+            }, {
+              show: false,
+              data: xAxisData
+            }],
+            visualMap: {
+              show: false,
+              min: 0,
+              max: 50,
+              dimension: 0,
+              inRange: {
+                color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
               }
-            })
-        }
+            },
+            yAxis: {
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                textStyle: {
+                  color: '#4a657a'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: '#08263f'
+                }
+              },
+              axisTick: {
+                show: false
+              }
+            },
+            series: [{
+              name: 'back',
+              type: 'bar',
+              data: data2,
+              z: 1,
+              itemStyle: {
+                normal: {
+                  opacity: 0.4,
+                  barBorderRadius: 5,
+                  shadowBlur: 3,
+                  shadowColor: '#111'
+                }
+              }
+            }, {
+              name: 'Simulate Shadow',
+              type: 'line',
+              data,
+              z: 2,
+              showSymbol: false,
+              animationDelay: 0,
+              animationEasing: 'linear',
+              animationDuration: 1200,
+              lineStyle: {
+                normal: {
+                  color: 'transparent'
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: '#08263a',
+                  shadowBlur: 50,
+                  shadowColor: '#000'
+                }
+              }
+            }, {
+              name: 'front',
+              type: 'bar',
+              data,
+              xAxisIndex: 1,
+              z: 3,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5
+                }
+              }
+            }],
+            animationEasing: 'elasticOut',
+            animationEasingUpdate: 'elasticOut',
+            animationDelay(idx) {
+              return idx * 20;
+            },
+            animationDelayUpdate(idx) {
+              return idx * 20;
+            }
+          })
       }
     }
+  }
 </script>
diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue
index cbba78b..0d74856 100644
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -2,218 +2,220 @@
     <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,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
+  export default {
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
       },
-      data() {
-        return {};
+      id: {
+        type: String,
+        default: 'chart'
       },
-      mounted() {
-        this.initChart();
+      width: {
+        type: String,
+        default: '200px'
       },
-      methods: {
-        initChart() {
-          this.chart = echarts.init(document.getElementById(this.id));
+      height: {
+        type: String,
+        default: '200px'
+      }
+    },
+    data() {
+      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));
 
-          this.chart.setOption({
-            backgroundColor: '#394056',
-            title: {
-              text: '请求数',
+        this.chart.setOption({
+          backgroundColor: '#394056',
+          title: {
+            text: '请求数',
+            textStyle: {
+              fontWeight: 'normal',
+              fontSize: 16,
+              color: '#F1F1F3'
+            },
+            left: '6%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            }
+          },
+          legend: {
+            icon: 'rect',
+            itemWidth: 14,
+            itemHeight: 5,
+            itemGap: 13,
+            data: ['移动', '电信', '联通'],
+            right: '4%',
+            textStyle: {
+              fontSize: 12,
+              color: '#F1F1F3'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+          }],
+          yAxis: [{
+            type: 'value',
+            name: '单位（%）',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            axisLabel: {
+              margin: 10,
               textStyle: {
-                fontWeight: 'normal',
-                fontSize: 16,
-                color: '#F1F1F3'
-              },
-              left: '6%'
-            },
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                lineStyle: {
-                  color: '#57617B'
-                }
+                fontSize: 14
               }
             },
-            legend: {
-              icon: 'rect',
-              itemWidth: 14,
-              itemHeight: 5,
-              itemGap: 13,
-              data: ['移动', '电信', '联通'],
-              right: '4%',
-              textStyle: {
-                fontSize: 12,
-                color: '#F1F1F3'
-              }
-            },
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true
-            },
-            xAxis: [{
-              type: 'category',
-              boundaryGap: false,
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
-            }],
-            yAxis: [{
-              type: 'value',
-              name: '单位（%）',
-              axisTick: {
-                show: false
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              axisLabel: {
-                margin: 10,
-                textStyle: {
-                  fontSize: 14
-                }
-              },
-              splitLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              }
-            }],
-            series: [{
-              name: '移动',
-              type: 'line',
-              smooth: true,
-              symbol: 'circle',
-              symbolSize: 5,
-              showSymbol: false,
+            splitLine: {
               lineStyle: {
-                normal: {
-                  width: 1
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: 'rgba(137, 189, 27, 0.3)'
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(137, 189, 27, 0)'
-                  }], false),
-                  shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  shadowBlur: 10
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: 'rgb(137,189,27)',
-                  borderColor: 'rgba(137,189,2,0.27)',
-                  borderWidth: 12
+                color: '#57617B'
+              }
+            }
+          }],
+          series: [{
+            name: '移动',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(137, 189, 27, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(137, 189, 27, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(137,189,27)',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
 
-                }
-              },
-              data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
-            }, {
-              name: '电信',
-              type: 'line',
-              smooth: true,
-              symbol: 'circle',
-              symbolSize: 5,
-              showSymbol: false,
-              lineStyle: {
-                normal: {
-                  width: 1
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: 'rgba(0, 136, 212, 0.3)'
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(0, 136, 212, 0)'
-                  }], false),
-                  shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  shadowBlur: 10
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: 'rgb(0,136,212)',
-                  borderColor: 'rgba(0,136,212,0.2)',
-                  borderWidth: 12
+              }
+            },
+            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+          }, {
+            name: '电信',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0, 136, 212, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(0, 136, 212, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(0,136,212)',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
 
-                }
-              },
-              data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
-            }, {
-              name: '联通',
-              type: 'line',
-              smooth: true,
-              symbol: 'circle',
-              symbolSize: 5,
-              showSymbol: false,
-              lineStyle: {
-                normal: {
-                  width: 1
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: 'rgba(219, 50, 51, 0.3)'
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(219, 50, 51, 0)'
-                  }], false),
-                  shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  shadowBlur: 10
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: 'rgb(219,50,51)',
-                  borderColor: 'rgba(219,50,51,0.2)',
-                  borderWidth: 12
-                }
-              },
-              data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
-            }]
-          })
-        }
+              }
+            },
+            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+          }, {
+            name: '联通',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(219, 50, 51, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(219, 50, 51, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(219,50,51)',
+                borderColor: 'rgba(219,50,51,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+          }]
+        })
       }
     }
+}
 </script>
diff --git a/src/components/Charts/mixchart.vue b/src/components/Charts/mixchart.vue
index 04904df..28bdc1e 100644
--- a/src/components/Charts/mixchart.vue
+++ b/src/components/Charts/mixchart.vue
@@ -2,264 +2,266 @@
     <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');
-    export default {
-      name: 'barPercent',
-      props: {
-        className: {
-          type: String,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
+  import echarts from 'echarts';
+
+  export default {
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
       },
-      data() {
-        return {};
+      id: {
+        type: String,
+        default: 'chart'
       },
-      mounted() {
-        this.initChart();
+      width: {
+        type: String,
+        default: '200px'
       },
-      methods: {
-        initChart() {
-          this.chart = echarts.init(document.getElementById(this.id));
-          const xData = (function() {
-            const data = [];
-            for (let i = 1; i < 13; i++) {
-              data.push(i + '月份');
+      height: {
+        type: String,
+        default: '200px'
+      }
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+      this.chart = null;
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(document.getElementById(this.id));
+        const xData = (function() {
+          const data = [];
+          for (let i = 1; i < 13; i++) {
+            data.push(i + '月份');
+          }
+          return data;
+        }());
+        this.chart.setOption({
+          backgroundColor: '#344b58',
+          title: {
+            text: '统计',
+            x: '4%',
+            textStyle: {
+              color: '#fff',
+              fontSize: '22'
+            },
+            subtextStyle: {
+              color: '#90979c',
+              fontSize: '16'
             }
-            return data;
-          }());
-          this.chart.setOption({
-            backgroundColor: '#344b58',
-            title: {
-              text: '统计',
-              x: '4%',
-              textStyle: {
-                color: '#fff',
-                fontSize: '22'
-              },
-              subtextStyle: {
-                color: '#90979c',
-                fontSize: '16'
-              }
-            },
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                textStyle: {
-                  color: '#fff'
-                }
-              }
-            },
-            grid: {
-              borderWidth: 0,
-              top: 110,
-              bottom: 95,
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               textStyle: {
                 color: '#fff'
               }
-            },
-            legend: {
-              x: '15%',
-              top: '10%',
-              textStyle: {
-                color: '#90979c'
-              },
-              data: ['女', '男', '平均']
-            },
-            calculable: true,
-            xAxis: [{
-              type: 'category',
-              axisLine: {
-                lineStyle: {
-                  color: '#90979c'
-                }
-              },
-              splitLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              splitArea: {
-                show: false
-              },
-              axisLabel: {
-                interval: 0
-
-              },
-              data: xData
-            }],
-            yAxis: [{
-              type: 'value',
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#90979c'
-                }
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                interval: 0
-              },
-              splitArea: {
-                show: false
-              }
-            }],
-            dataZoom: [{
-              show: true,
-              height: 30,
-              xAxisIndex: [
-                0
-              ],
-              bottom: 30,
-              start: 10,
-              end: 80,
-              handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-              handleSize: '110%',
-              handleStyle: {
-                color: '#d3dee5'
-
-              },
-              textStyle: {
-                color: '#fff' },
-              borderColor: '#90979c'
-
-
-            }, {
-              type: 'inside',
-              show: true,
-              height: 15,
-              start: 1,
-              end: 35
-            }],
-            series: [{
-              name: '女',
-              type: 'bar',
-              stack: '总量',
-              barMaxWidth: 35,
-              barGap: '10%',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(255,144,128,1)',
-                  label: {
-                    show: true,
-                    textStyle: {
-                      color: '#fff'
-                    },
-                    position: 'insideTop',
-                    formatter(p) {
-                      return p.value > 0 ? p.value : '';
-                    }
-                  }
-                }
-              },
-              data: [
-                709,
-                1917,
-                2455,
-                2610,
-                1719,
-                1433,
-                1544,
-                3285,
-                5208,
-                3372,
-                2484,
-                4078
-              ]
-            },
-
-            {
-              name: '男',
-              type: 'bar',
-              stack: '总量',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(0,191,183,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter(p) {
-                      return p.value > 0 ? p.value : '';
-                    }
-                  }
-                }
-              },
-              data: [
-                327,
-                1776,
-                507,
-                1200,
-                800,
-                482,
-                204,
-                1390,
-                1001,
-                951,
-                381,
-                220
-              ]
-            }, {
-              name: '平均',
-              type: 'line',
-              stack: '总量',
-              symbolSize: 10,
-              symbol: 'circle',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(252,230,48,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter(p) {
-                      return p.value > 0 ? p.value : '';
-                    }
-                  }
-                }
-              },
-              data: [
-                1036,
-                3693,
-                2962,
-                3810,
-                2519,
-                1915,
-                1748,
-                4675,
-                6209,
-                4323,
-                2865,
-                4298
-              ]
             }
+          },
+          grid: {
+            borderWidth: 0,
+            top: 110,
+            bottom: 95,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          legend: {
+            x: '15%',
+            top: '10%',
+            textStyle: {
+              color: '#90979c'
+            },
+            data: ['女', '男', '平均']
+          },
+          calculable: true,
+          xAxis: [{
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#90979c'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+
+            },
+            data: xData
+          }],
+          yAxis: [{
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#90979c'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+            },
+            splitArea: {
+              show: false
+            }
+          }],
+          dataZoom: [{
+            show: true,
+            height: 30,
+            xAxisIndex: [
+              0
+            ],
+            bottom: 30,
+            start: 10,
+            end: 80,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle: {
+              color: '#d3dee5'
+
+            },
+            textStyle: {
+              color: '#fff' },
+            borderColor: '#90979c'
+
+
+          }, {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35
+          }],
+          series: [{
+            name: '女',
+            type: 'bar',
+            stack: '总量',
+            barMaxWidth: 35,
+            barGap: '10%',
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,144,128,1)',
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#fff'
+                  },
+                  position: 'insideTop',
+                  formatter(p) {
+                    return p.value > 0 ? p.value : '';
+                  }
+                }
+              }
+            },
+            data: [
+              709,
+              1917,
+              2455,
+              2610,
+              1719,
+              1433,
+              1544,
+              3285,
+              5208,
+              3372,
+              2484,
+              4078
             ]
-          })
-        }
+          },
+
+          {
+            name: '男',
+            type: 'bar',
+            stack: '总量',
+            itemStyle: {
+              normal: {
+                color: 'rgba(0,191,183,1)',
+                barBorderRadius: 0,
+                label: {
+                  show: true,
+                  position: 'top',
+                  formatter(p) {
+                    return p.value > 0 ? p.value : '';
+                  }
+                }
+              }
+            },
+            data: [
+              327,
+              1776,
+              507,
+              1200,
+              800,
+              482,
+              204,
+              1390,
+              1001,
+              951,
+              381,
+              220
+            ]
+          }, {
+            name: '平均',
+            type: 'line',
+            stack: '总量',
+            symbolSize: 10,
+            symbol: 'circle',
+            itemStyle: {
+              normal: {
+                color: 'rgba(252,230,48,1)',
+                barBorderRadius: 0,
+                label: {
+                  show: true,
+                  position: 'top',
+                  formatter(p) {
+                    return p.value > 0 ? p.value : '';
+                  }
+                }
+              }
+            },
+            data: [
+              1036,
+              3693,
+              2962,
+              3810,
+              2519,
+              1915,
+              1748,
+              4675,
+              6209,
+              4323,
+              2865,
+              4298
+            ]
+          }
+          ]
+        })
       }
     }
+  }
 </script>
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 7684071..44aa752 100644
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/src/views/charts/keyboard2.vue b/src/views/charts/keyboard2.vue
index 964a194..623bb82 100644
--- a/src/views/charts/keyboard2.vue
+++ b/src/views/charts/keyboard2.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index 975cf91..726fdfd 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/src/views/charts/mixchart.vue b/src/views/charts/mixchart.vue
index 4a0e6a0..7f3f51b 100644
--- a/src/views/charts/mixchart.vue
+++ b/src/views/charts/mixchart.vue
@@ -1,15 +1,15 @@
 <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>