前言
最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章：https://www.jb51.net/article/128790.htm 下面话不多说了，来一起看看详细的介绍吧。
使用方法
使用Echarts首先得先把Echarts.js引进来（放在文件的入口html文件里面）
<script src="/UploadFiles/2021-04-02/echarts.common.min.js">
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>初始化一个 echarts 实例并通过 setOption 方法生成一个你想要的图表类型,
首先先把，echarts里setOption的option,单独领出来，初始化放在data里
data() { return { getSetOption: {//折线图 title: { text: null }, tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, yAxis: { type: 'value' }, legend: { data: [] }, xAxis: { type: 'category', data: [] }, series: [ { name: null, type: 'line', stack: '总人数', data: [] } ] }, getPieOption: {//饼图 title: { text: null }, tooltip: { tooltip: 'item', formatter: "{a} <br/> {b} : {c} ({d}%)" }, series : [ { type: 'pie', radius: '55%', data:[ ].sort(function(a,b){return a.value - b.value;}), roseType: 'angle', } ] }, } }下面是在methods里初始化的一个方法，
drawLineChart() { this.lineChartOrder = echarts.init(document.getElementById('lineChartOrder')); this.lineChartOrder.setOption(this.getSetOption); },然后在mounted里调用这个方法
this.drawLineChart(),接下来就就是数据异步加载与更新了。
以下的代码是本地的json类型，异步加载数据时只要填入数据，然后在series里根据名字对应到相应的系列就可以了。
getOrderTotal(){//获取一段时间内的订单统计 api.getOrderStatistical(this.begin, this.end,this.kId) .then(res => { if (res.data.ok && res.data.r.length) { const results = res.data.r, legends = results.map(item => ({ name: item.channelName, data: item.dateStatisticals })) this.lineChartOrder.setOption({ title: { text: '订单统计' }, legend: { data: legends.map(item => item.name) }, xAxis: { data: legends[0].data.map(item => item.date) }, series: legends.map(item => { return { type: 'line', name: item.name, data: item.data.map(item => item.count) } }) }) } }).catch(err => { // console.log(err) })但是，echarts的数据是直接merge的，所以当出现多条折线时，如果当天的数据为0，或者后台传过来的数据为空的时候，setOption的值根本就没有更新，而是直接merge了，所以这个问题就头大了。
对于这个问题的解决方法是
用getOption取到已经存在的option, 然后用
this.lineChartOrder.setOption.clear()，清空option，最后this.lineChartOrder.setOption(option, false, false)。这样就可以清掉了。
以下是官网异步数据加载与更新的方法，会相对简单些。
// 异步加载数据 $.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] });只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com