Use OffScreenCanvas API for big data live charts

One-line summary [问题简述]

I am creating an application which shows years of historic data and also keeps plotting new live data from a web socket connection, I am facing real performance issues and UI thread goes blocking, I have been searching on it and I think the solution is this. Make use of OffScreenCanvas API to render live charts with big data smoothly. It is really easy to use with just one line amendment. canvasElement.transferControlToOffscreen()

Expected behaviour [期望结果]

Live charts with big data should work smoothly.

[timothymarois]

Has this been implemented in the source yet? I would also like the performance to be improved on large data sets, was there any progress on this aside from @CarterLi forked version? Forgive me if I misunderstood this thread, but it seems very useful as I’ve been testing large data sets with dozens of series lines, it starts to drop FPS pretty quick.

[skortchmark9]

I was able to get drawing working in a web worker using this feature:

// main.js
const offscreen = elt.transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// worker.js
onmessage = function(evt) {
	const canvas = evt.data.canvas;

	echarts.setCanvasCreator(function () {
		return new OffscreenCanvas(32, 32);
	});

	const plot = echarts.init(canvas);
        plot.setOption(...);
}

Certain features didn’t work, but it’s a good start.