这个示例使用 vue-cli 脚手架搭建
安装echarts依赖
npm install echarts --save
创建图表
可选择全局引入 或者 按需引入
全局引入会将所有的echarts图表打包进去,会导致体积过大,个人建议使用按需引入。
全局引入
main.js
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Home.vue
<div id="chart" style="width: 500px; height: 500px;"></div>
export default {
name: 'home',
data () {
return {}
},
mounted(){
this.drawEChart();
},
methods: {
drawEChart(){
// 初始化ECharts实例
let chart = this.$echarts.init(document.getElementById('chart'))
// 绘制图表
chart.setOption({
title: { text: '在Vue中使用ECharts' },
tooltip: {},
xAxis: {
data: ["衣服","裤子","袜子","手套","围巾","帽子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 13, 14, 22]
}]
});
}
}
}
*注意:这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用 。
按需引入
home.vue
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'home',
data() {
return {}
},
mounted() {
this.drawEChart();
},
methods: {
drawEChart() {
// 初始化echarts实例
let chart = echarts.init(document.getElementById('chart'))
// 绘制图表
chart.setOption({
title: { text: '在Vue中使用ECharts' },
tooltip: {},
xAxis: {
data: ["衣服","裤子","袜子","手套","围巾","帽子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 13, 14, 22]
}]
});
}
}
}
*注意:这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。