官方文档 : http://echarts.baidu.com/tutorial.html
npm install echarts --save
let lineChart = echarts.init(document.getElementById('lineEchartContainer'), 'dark') // 折线图
lineChart.showLoading() //开启loading let option = { title: { text: '点击量折线图' }, //标题 tooltip: {}, //鼠标悬停 legend: { data: nameList //名称显示列表 }, xAxis: { data: [2,3,4,5,6,7] //X轴 }, yAxis: {}, //Y轴 series: seriesList //数据,若有多条数据,格式为:series:[{name: '',type:'line',data:'22'},{name: '',type: 'line',date: '11'}],name和legend中的nameList对应,type为类型,data为数值,若需要折线换成曲线,加上smooth: true } lineChart.clear() //先清除图表 lineChart.setOption(option, true) //再设置配置 lineChart.hideLoading() //关闭loading 这里为什么要先清除图表,再设置图表呢,因为很多时候我们都是动态绑定数据,可能有触发事件来更新视图,但是数据是绑定到了视图上,我们只能设置配置来更改,单纯的修改数据是不行的,所以要先清空视图,然后再把新的配置设置上去,就OK了。 希望本文对你有所帮助!
转载于:https://www.cnblogs.com/wangqiao170/p/9267283.html
