以前可能写过,懒得去翻了,再写一次
1,安装echarts 导入到页面
import echarts from 'echarts';
2.在生命周期里面做初始化
data(){ return{ teacherChart:null } } created(){ this.teacherChart= echarts.init(document.getElementById('teacherChart')); //执行一个函数 this.teacherCont(); }, methods:{ teacherCont(){ /*要哪个图去官网拿,不多写了*/ const chartOption={ title:{}, tooltip:{}, series:[{ data:[ {val:数据里面的值,name:‘关注’}, {val:数据里面的值,name:‘不关注’}, ] }] } this.teacherChart.setOption(chartOption); } }
上面是最简单的图表
来一个数据遍历的
比如x轴
xAxis: {
data: this.chartData.map(item => {
return item.name;
}),
axisLabel:{
interval: 0,
rotate: 60
},
axisLine: {
show: false,
lineStyle: {
color: '#a3a3a3'
}
}
},像这样遍历出来就可以