app开发定制欢迎大家加入我的社区：
app开发定制社区中不定时发红包

1、安装

npm install echarts --save
1

---

2、在vue中引入（全局引入）

// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts
1
2
3
4

---

3、在vue中的使用

需要用到的地方先设置一个div的id、宽高

提示：
可以在一个页面中引入多个数据报表模板
使用div进行位置的排版放置

---

4、模板代码放在哪个位置

重点注意：其中const option = { }就是我们需要引进echart图表的代码

<template>  <div>    <div ref="chart" style="width:50%;height:376px"></div>  </div></template>
1
2
3
4
5
6
7

要在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中。

mounted(){    this.getEchartData()      },   methods: {    getEchartData() {      const chart = this.$refs.chart      if (chart) {        const myChart = this.$echarts.init(chart)        const option = {...}        myChart.setOption(option)        window.addEventListener("resize", function() {          myChart.resize()        })      }       this.$on('hook:destroyed',()=>{         window.removeEventListener("resize", function() {          myChart.resize();        });        })    }  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

5、完整的一个vue页面实例：

<template>  <div>    <div ref="chart" style="width:50%;height:376px"></div>    <div ref="chart1" style="width:50%;height:376px"></div>  </div></template><script>  export default {    data() {    },    mounted() {      this.getEchartData()      this.getEchartData1()    },    methods: {      getEchartData() {        const chart = this.$refs.chart        if (chart) {          const myChart = this.$echarts.init(chart)          const option = { legend: {},            tooltip: {},            dataset: {              source: [                ['订单', 43.3, 85.8],                ['订单1', 83.1, 73.4],                ['订单2', 86.4, 65.2],                ['订单3', 72.4, 53.9],                ['订单4', 82.4, 53.9],                ['订单5', 42.4, 53.9],                ['订单6', 72.4, 53.9],                ['订单7', 72.4, 53.9]              ]            },            xAxis: { type: 'category' },            yAxis: {},            series: [ { type: 'bar' }, { type: 'bar' }]}          myChart.setOption(option)          window.addEventListener("resize", function() {            myChart.resize()          })        }        this.$on('hook:destroyed',()=>{          window.removeEventListener("resize", function() {            myChart.resize();          });        })      },      getEchartData1() {        const chart1 = this.$refs.chart1        if (chart1) {          const myChart = this.$echarts.init(chart1)          const option = {            title: {              text: 'Stacked Line'            },            tooltip: {              trigger: 'axis'            },            legend: {              data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']            },            grid: {              left: '3%',              right: '4%',              bottom: '3%',              containLabel: true            },            toolbox: {              feature: {                saveAsImage: {}              }            },            xAxis: {              type: 'category',              boundaryGap: false,              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']            },            yAxis: {              type: 'value'            },            series: [              {                name: 'Email',                type: 'line',                stack: 'Total',                data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230]              },              {                name: 'Union Ads',                type: 'line',                stack: 'Total',                data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330]              },              {                name: 'Video Ads',                type: 'line',                stack: 'Total',                data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330]              },              {                name: 'Direct',                type: 'line',                stack: 'Total',                data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330]              },              {                name: 'Search Engine',                type: 'line',                stack: 'Total',                data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330]              }            ]          }          myChart.setOption(option)          window.addEventListener("resize", function() {            myChart.resize()          })        }        this.$on('hook:destroyed',()=>{          window.removeEventListener("resize", function() {            myChart.resize();          });        })      },          },    watch: {},    created() {    }  }</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

---

6、实现效果

---

7、可能遇到的问题，下载不成功。使用

cnpm install echarts --save
1

---

8、11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts

修改引入的方式

// 引入echartsimport *as echarts from 'echarts'Vue.prototype.$echarts = echarts
1
2
3
4
5