位置: 编程技术 - 正文
vue在使用ECharts时的异步更新和数据加载详解(vue中的echarts)
编辑：rootadmin推荐整理分享vue在使用ECharts时的异步更新和数据加载详解(vue中的echarts)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue echarts,vue echarts,vue在使用组件前判断组件是否存在,vuejs echarts,vue中echarts怎么用,vue中的echarts,vue中echarts怎么用,vue中用echarts,内容如对您有帮助，希望把文章链接给更多的朋友！
前言
最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章： 下面话不多说了，来一起看看详细的介绍吧。
使用方法
使用Echarts首先得先把Echarts.js引进来（放在文件的入口html文件里面）
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
初始化一个 echarts 实例并通过 setOption 方法生成一个你想要的图表类型,
首先先把，echarts里setOption的option,单独领出来，初始化放在data里
下面是在methods里初始化的一个方法，
然后在mounted里调用这个方法
接下来就就是数据异步加载与更新了。
以下的代码是本地的json类型，异步加载数据时只要填入数据，然后在series里根据名字对应到相应的系列就可以了。
但是，echarts的数据是直接merge的，所以当出现多条折线时，如果当天的数据为0，或者后台传过来的数据为空的时候，setOption的值根本就没有更新，而是直接merge了，所以这个问题就头大了。
对于这个问题的解决方法是
用getOption取到已经存在的option, 然后用this.lineChartOrder.setOption.clear() ，清空option，最后this.lineChartOrder.setOption(option, false, false) 。
这样就可以清掉了。
以下是官网异步数据加载与更新的方法，会相对简单些。
只需要将数据填充进入就可以了。
总结
标签: vue中的echarts
本文链接地址:https://www.jiuchutong.com/biancheng/377426.html 转载请保留说明！
![[安卓基础]数据存储之SharedPreferences(安卓数据储存方式有哪些)](https://www.jiuchutong.com/image/20240129/1706507651.jpg)