vue 使用echarts图表 setOption多次很卡问题解决

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

项目场景:

在开发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 就可以了。
var code = “e8dd3156-bfcf-4b55-a146-310f50dbb2a9”

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: vue