Vue's use of echarts chart setOption has been stuck many times and the problem of solving it

Use echarts chart setOption many times to be stuck

Project Scenario

When developing ISM configuration software, using echarts charts, dragging and dropping the charts is very stuck.

Problem description

It's slow to update loading graphics using echarts in vue

Cause analysis

Since = (view, null); when initializing the chart, the echartsView variable is defined in data, which causes the canvas to trigger vue listening and update when the chart is setOption and resize, and each update causes the load to slow down

Solution

It is said that defining variables in script can be solved, but this is for the case of a component. However, if a page has multiple components, and the variables defined in script are shared by multiple components, it will cause other components to display abnormally.

For this situation. Define it directly in created

 = null

Or directly

 = (view, null);

Just don't define echartsView in data.

echarts big data multi-chart drawing solution

Reasons for page stuttering

1. There are many pictures drawn on the page. When each legend has no data, it will create a timer to render the bubble. After the page is switched, the echarts legend is destroyed, but the instance of this echarts is still in memory, and its bubble rendering timer is still running. This causes Echarts to occupy a high CPU, causing the browser to stutter, and even the browser crashes when the data volume is large.

2. The amount of data is so large that the browser is stuck

Solution

1. Add a beforeDestroy() method between the mounted() method and the destroy() method to release the chart resource of the page. I have also tried to use the dispose() method, but dispose destroys this legend. The legend does not exist. However, the resize() method of the legend will be started, and the method without resize will be reported. The clear() method clears the legend data, which does not affect the resize of the legend, and can free up memory. The switching will be smooth. The implementation code is as follows:

beforeDestroy(){
    this.$ && this.$();
};

2. The amount of data is so large that the browser is stuck. In fact, it is best to optimize it from the design perspective. Either don’t display so many pictures on one page, or let the server sample the data. After all, there are so many points that cannot be seen. In addition, echarts also provides rendering scenarios with large data volume (more than one million), sharded loading data and incremental rendering.

In scenarios with large data volumes (such as geographic number dosing), even if the data is in binary format, there will be dozens or hundreds of megabytes. In the Internet environment, it is often necessary to load in pieces.

The appendData interface provides the ability to render incrementally after shard loading. When rendering newly added data blocks, the original rendered part will not be cleared. The implementation code is as follows:

​var loadedChunkIndex = 0;
var chunkCount = ;//Big data has been divided into several groups of listsfunction appendData() {
    if (loadedChunkIndex >= chunkCount) {
        return;
    }
    setTimeout(function () {
        ({seriesIndex: 0, data: rawData[loadedChunkIndex]});
        loadedChunkIndex++;
        appendData();
    }, 300);
}
appendData();

Notes:

1. In all the chart components, the interface data is implemented through the dataset parameter. For rendering of huge data volumes (such as more than one million data volumes), appendData is required for incremental loading. In this case, dataset is not supported, and it needs to be used.

2. Currently, not all charts support incremental rendering when sharding is loaded. The currently supported figures are: scatter plots and line plots of the basic version of ECharts. ECharts GL's scatterGL, lineGL, and visual complexes (polygons3D).

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.