关于Echarts表格插件的使用

 <template>
   <div :style="{height:height,width:width}"></div>
 </template>

 <script>
   import echarts from 'echarts';
   require('echarts/theme/macarons'); // echarts 主题

   export default {
     props: {
       width: {
         type: String,
         default: '100%'
       },
       height: {
         type: String,
         default: '220px'
       },
       series: {
         type: Array,
         default: []
       },
       title: {
         type: String,
         default: ''
       },
       xAxisData: {
         type: Array,
         default: function () {
         return []
         }
       }
     },
     data() {
       return {
         chart: null
       };
     },
     mounted() {
       this.initChart();
     },
     beforeDestroy() {
       if (!this.chart) {
         return
       }
       this.chart.dispose()
       this.chart = null
     },
     watch: {
       series: {
         handler() {
           this.initChart()
         },
         deep: true
       },
       xAxisData: {
         handler() {
           this.initChart()
         },
         deep: true
       }
     },
     methods: {
       initChart() {
         if (this.chart !== null && this.chart !== '' && this.chart !== undefined) {
           this.chart.dispose();
         }
         this.chart = echarts.init(this.$el, 'macarons');

         this.chart.setOption({
           title: {
             text: "接口日分析",
             textStyle: {
               color: '#333',
               fontSize: 16
             }
           },
           legend: {
             data:['接入数据量','下发数据量']
           },
           xAxis: {
             data: this.xAxisData,
             boundaryGap: false
           },
           grid: {
             top: '15%',
             left: 10,
             right: 40,
             bottom: 20,
             containLabel: true
           },
           toolbox: {
             show : true,
             feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               magicType : {show: true, type: ['line', 'bar']}  // 柱状图和折线图切换
             }
           },
           calculable : true,
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'cross'
             }
           },
           yAxis: {},
           series:
             [{
             name: '接入数据量',
             itemStyle: {
               normal: {
                 areaStyle: {}
               }
             },
             smooth: true,
             type: 'line',
             data: [100, 120, 161, 134, 105, 160, 165],
             animationDuration: 2600,
             animationEasing: 'cubicInOut'
           },
           {
             name: '下发数据量',
             smooth: true,
             type: 'line',
             itemStyle: {
               normal: {
                 color: 'rgba(2, 197, 233, 0.2)',
                 lineStyle: {
                   color: 'rgba(2, 197, 233, 0.2)'
                 },
                 areaStyle: {
                   color: 'rgba(99,194,255, 0.6)'
                 }
               }
             },
             data: [120, 82, 91, 154, 162, 140, 130],
             animationDuration: 2000,
             animationEasing: 'quadraticOut'
           }]
         })
       }
     }
 }
 </script>

效果图