Vue plug-in integrated echarts

1. Project installation echarts

npm install echarts --save

2. Global Configuration: main.js 

1 import echarts from 'echarts'
2 
3 Vue.use(echarts)
4 Vue.prototype.$echarts = echarts

3. Use the target interface

 1 <template>
 2   <div>
 3    <div class="total-class" id="myChart" :style="{width: '100%', height: '400px'}"></div>
 4   </div>
 5 </template>
 6 <script>
 7   export default {
 8      data () {
 9       return {
10        }
11       },
12 methods: {
13 drawLine () {
14         // 基于准备好的dom，初始化echarts实例
15         let myChart = this.$echarts.init(
16           document.getElementById ( 'myChart' )
 . 17          )
 18 is          // graphed 
. 19          myChart.setOption ({
 20 is            Color: [ '# 3398DB' ],
 21 is            ToolTip: {
 22 is              Trigger: 'Axis' ,
 23 is              axisPointer: {             // axis indicator, triggering an effective axis 
24                type: 'Shadow'         // default is linear, optionally: 'Line' | 'Shadow' 
25              }
 26 is            },
 27            Grid: {
 28              left: '. 3%' ,
 29             right: '4%',
30             bottom: '3%',
31             containLabel: true
32           },
33           xAxis: [
34             {
35               type: 'category',
36               data: ['Mon','Tue','Wed','Thur','Fir','Sat','Sun],
37               axisTick: {
38                 alignWithLabel: true
39               }
40             }
41           ],
42           yAxis: [
43             {
44               type: 'value'
45             }
46           ],
47           series: [
48             {
49               name: '测试',
50               type: 'bar',
51               barWidth: '50%',
52               data: [15,35,45,68,70,50,60]53             }
54           ]
55         })
56       }
57   }
58 </script>

 Note: series type bar in a bar graph showing, line chart represents the discount. . .