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

使用echarts图表setOption多次很卡

项目场景

在开发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 就可以了。

echarts大数据多图表绘制卡顿解决方案

页面卡顿原因

1、页面绘制的图比较多，每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts图例是销毁了，但是这个echarts的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃

2、数据量已经大到浏览器卡死了

解决方法

1、在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源，我也试过使用dispose()方法，但是dispose销毁这个图例，图例是不存在了，但图例的resize()方法会启动，则会报没有resize这个方法，而clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存，切换的时候就很顺畅了，实现代码如下：

beforeDestroy(){
    this.$refs.myChart && this.$refs.myChart.clear();
};

2、数据量已经大到浏览器卡死，其实最好从设计上优化，要么不要一个页面展示那么多图，要么让服务端把数据做一下采样，毕竟那么多的点也没法看，另外echarts也提供了大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。

在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。

appendData 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分，实现代码如下：

​var loadedChunkIndex = 0;
var chunkCount = rawData.length;//大数据被分了几组list
function appendData() {
    if (loadedChunkIndex >= chunkCount) {
        return;
    }
    setTimeout(function () {
        chart.appendData({seriesIndex: 0, data: rawData[loadedChunkIndex]});
        loadedChunkIndex++;
        appendData();
    }, 300);
}
appendData();

注意事项：

1、我们现在所有图表组件中接口数据都是通过dataset参数实现的，对于巨大数据量的渲染（如百万以上的数据量），需要使用 appendData 进行增量加载，这种情况不支持使用 dataset，需要使用series.data。

2、目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有：ECharts 基础版本的 散点图（scatter） 和 线图（lines）。ECharts GL 的 散点图（scatterGL）、线图（linesGL） 和 可视化建筑群（polygons3D）。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。