vue 使用echarts图表 setOption多次很卡问题解决
在开发ISM组态软件时,使用echarts图表,拖拽图表很卡。在vue中使用echarts使用setOption更新加载图形很慢由于this.echartsView = echarts.init(view, null);初始化图表时,echartsView 变量是定义在data里,这就导致了图表setOption和resize时,canvas触发了vue监听而更新,而每一次的更新,导致加载变慢网上
·
项目场景:
在开发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/
更多推荐
已为社区贡献1条内容
所有评论(0)