安装echarts依赖
1 | npm install echarts -S |
安装cnpm
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org |
1 | cnpm install echarts -S |
1、全局引入（打包后文件非常大，不建议）
main.js
1 | // 引入echarts |
2 | import echarts from 'echarts' |
3 | Vue.prototype.$echarts = echarts |
01 | //图标显示 |
02 | <div id="myChart" :style="{width: '300px', height: '300px'}"></div> |
03 |
04 | //配置 |
05 | export default { |
06 | name: 'hello', |
07 | data () { |
08 | return { |
09 | msg: 'Welcome to Your Vue.js App' |
10 | } |
11 | }, |
12 | mounted(){ |
13 | this.drawLine(); |
14 | }, |
15 | methods: { |
16 | drawLine(){ |
17 | // 基于准备好的dom，初始化echarts实例 |
18 | let myChart = this.$echarts.init(document.getElementById('myChart')) |
19 | // 绘制图表 |
20 | myChart.setOption({ |
21 | title: { text: '在Vue中使用echarts' }, |
22 | tooltip: {}, |
23 | xAxis: { |
24 | data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] |
25 | }, |
26 | yAxis: {}, |
27 | series: [{ |
28 | name: '销量', |
29 | type: 'bar', |
30 | data: [5, 20, 36, 10, 10, 20] |
31 | }] |
32 | }); |
33 | } |
34 | } |
35 | } |
2、按需引入
上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。
Hello.vue
01 | <div id="myChart" :style="{width: '300px', height: '300px'}"></div> |
02 |
03 |
04 | // 引入基本模板 |
05 | let echarts = require('echarts/lib/echarts') |
06 | // 引入柱状图组件 |
07 | require('echarts/lib/chart/bar') |
08 | // 引入提示框和title组件 |
09 | require('echarts/lib/component/tooltip') |
10 | require('echarts/lib/component/title') |
11 | export default { |
12 | name: 'hello', |
13 | data() { |
14 | return { |
15 | msg: 'Welcome to Your Vue.js App' |
16 | } |
17 | }, |
18 | mounted() { |
19 | this.drawLine(); |
20 | }, |
21 | methods: { |
22 | drawLine() { |
23 | // 基于准备好的dom，初始化echarts实例 |
24 | let myChart = echarts.init(document.getElementById('myChart')) |
25 | // 绘制图表 |
26 | myChart.setOption({ |
27 | title: { text: 'ECharts 入门示例' }, |
28 | tooltip: {}, |
29 | xAxis: { |
30 | data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] |
31 | }, |
32 | yAxis: {}, |
33 | series: [{ |
34 | name: '销量', |
35 | type: 'bar', |
36 | data: [5, 20, 36, 10, 10, 20] |
37 | }] |
38 | }); |
39 | } |
40 | } |
41 | } |
注：这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。
