Vue集成echarts插件

1.项目安装echarts

npm install echarts --save

2.全局配置：main.js 

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

3.目标界面使用

 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         // 绘制图表
19         myChart.setOption({
20           color: ['#3398DB'],
21           tooltip: {
22             trigger: 'axis',
23             axisPointer: {            // 坐标轴指示器，坐标轴触发有效
24               type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
25             }
26           },
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>

 注意：series中type  bar表示柱状图，line表示折现图，。。。