近日公司在开发一个数据报表低代码平台,所有图表需要动态生成,但是不管怎么设置都echarts图表更新都没有动画显示后来发现是几个方面出了问题. # 注意点一:没有开启echarts的不合并更新 ```js ... this.echartsInstance.setOption(newVal, true); ... ``` # 注意点二:在option变化之前没有使用clear()方法清除上一个echarts绘制的图案注意如果新旧数据相同的话,注意点一和注意点二都得设置. ```js ... this.echartsInstance.clear(); this.echartsInstance.setOption(newVal, true); ... ``` # 注意点三:更新的时候必须只更新echarts的option配置,不能将echarts所在div也更新了比如更新数据的时候,一开始我是用v-for动态生成的div,更新的时候是直接替换的v-for绑定的数组,这样做就会导致更新没有动画,并且还会导致闪屏,但是改成修改数组元素里面的option那就有动画了,也不会导致闪屏. # 总结附上demo代码 demo源码github地址:https://github.com/tonyma2015/echarts_bug.git ```vue ```