安装
npm install echarts @4.6.0 --save 目前推荐使用4.6.0版本,因为其他版本看你数据不太稳定,默认下载的是最新版本;
在项目中引入echarts
import * as echarts from 'echarts';
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
2 装它的盒子必须有宽高
<div id="main" ref="chart"></div>
3 需要写在能够获取dom节点的钩子函数里 推荐mounted
mounted() {
// 这句代码的意思为,给这个图表中添加渲染的内容,内容写在setOption中
echarts.init(this.$refs.chart).setOption(this.data);
}
4 option的数据,写在vue的data数据中,也可以是请求获取到的数据