项目场景:

在开发ISM组态软件时,使用echarts图表,拖拽图表很卡。


问题描述

在vue中使用echarts使用setOption更新加载图形很慢


原因分析:

由于this.echartsView = echarts.init(view, null);初始化图表时,echartsView 变量是定义在data里,这就导致了图表setOption和resize时,canvas触发了vue监听而更新,而每一次的更新,导致加载变慢


解决方案:

网上都是说把变量定义在script里,是可以解决,但是这样针对一个组件的情况,但是如果一个页面有多个组件,这样定义在script的变量是多个组件共享的,就会导致其他组件显示不正常。
针对这个情况。直接在created里面定义this.echartsView

this.echartsView = null

或者直接

this.echartsView = echarts.init(view, null);

不要在data里面定义echartsView 就可以了。

总结

如有不明白的地方欢迎通过邮件与我联系,我会详细为你解答,hexinjun888@163.com
ISM组态软件下载地址 :https://ismctl.com/
SM组态软件 演示地址:http://36.133.188.61:8081/

Logo

前往低代码交流专区

更多推荐