关于Echarts表格插件的使用 

  1 <template>
  2   <div :style="{height:height,width:width}"></div>
  3 </template>
  4 
  5 <script>
  6   import echarts from 'echarts';
  7   require('echarts/theme/macarons'); // echarts 主题
  8 
  9   export default {
 10     props: {
 11       width: {
 12         type: String,
 13         default: '100%'
 14       },
 15       height: {
 16         type: String,
 17         default: '220px'
 18       },
 19       series: {
 20         type: Array,
 21         default: []
 22       },
 23       title: {
 24         type: String,
 25         default: ''
 26       },
 27       xAxisData: {
 28         type: Array,
 29         default: function () {
 30         return []
 31         }
 32       }
 33     },
 34     data() {
 35       return {
 36         chart: null
 37       };
 38     },
 39     mounted() {
 40       this.initChart();
 41     },
 42     beforeDestroy() {
 43       if (!this.chart) {
 44         return
 45       }
 46       this.chart.dispose()
 47       this.chart = null
 48     },
 49     watch: {
 50       series: {
 51         handler() {
 52           this.initChart()
 53         },
 54         deep: true
 55       },
 56       xAxisData: {
 57         handler() {
 58           this.initChart()
 59         },
 60         deep: true
 61       }
 62     },
 63     methods: {
 64       initChart() {
 65         if (this.chart !== null && this.chart !== '' && this.chart !== undefined) {
 66           this.chart.dispose();
 67         }
 68         this.chart = echarts.init(this.$el, 'macarons');
 69 
 70         this.chart.setOption({
 71           title: {
 72             text: "接口日分析",
 73             textStyle: {
 74               color: '#333',
 75               fontSize: 16
 76             }
 77           },
 78           legend: {
 79             data:['接入数据量','下发数据量']
 80           },
 81           xAxis: {
 82             data: this.xAxisData,
 83             boundaryGap: false
 84           },
 85           grid: {
 86             top: '15%',
 87             left: 10,
 88             right: 40,
 89             bottom: 20,
 90             containLabel: true
 91           },
 92           toolbox: {
 93             show : true,
 94             feature : {
 95               mark : {show: true},
 96               dataView : {show: true, readOnly: false},
 97               magicType : {show: true, type: ['line', 'bar']}  // 柱状图和折线图切换
 98             }
 99           },
100           calculable : true,
101           tooltip: {
102             trigger: 'axis',
103             axisPointer: {
104               type: 'cross'
105             }
106           },
107           yAxis: {},
108           series:
109             [{
110             name: '接入数据量',
111             itemStyle: {
112               normal: {
113                 areaStyle: {}
114               }
115             },
116             smooth: true,
117             type: 'line',
118             data: [100, 120, 161, 134, 105, 160, 165],
119             animationDuration: 2600,
120             animationEasing: 'cubicInOut'
121           },
122           {
123             name: '下发数据量',
124             smooth: true,
125             type: 'line',
126             itemStyle: {
127               normal: {
128                 color: 'rgba(2, 197, 233, 0.2)',
129                 lineStyle: {
130                   color: 'rgba(2, 197, 233, 0.2)'
131                 },
132                 areaStyle: {
133                   color: 'rgba(99,194,255, 0.6)'
134                 }
135               }
136             },
137             data: [120, 82, 91, 154, 162, 140, 130],
138             animationDuration: 2000,
139             animationEasing: 'quadraticOut'
140           }]
141         })
142       }
143     }
144 }
145 </script>

        效果图

posted @ 2019-03-04 10:34  王小道  阅读(11211)  评论(0)  编辑  收藏  举报