/echarts-with-offscreencanvas

Echarts with OffscreenCanvas

Primary LanguageJavaScript

OffscreenEcharts

Echarts with OffscreenCanvas

How does it work

  1. A canvas cannot be used directly in worker, but OffscreenCanvas can be used as a handle to control it.
  2. All rendering is done in worker. Echarts has pretty well worker support, with a few exceptions. Patched below.
  3. Mouse events are bind on the canvas in UI thread. When triggered, necessary event data is sent into worker using postMessage, then dispatches the event to echarts instance using its internal API. See ecomfe/zrender#448 (comment)
  4. All methods are dispatched into worker using postMessage, and return a promise immediately. After the method is called in worker, send its return value back to UI thread using postMessage, and then resolve the promise. See https://github.com/CarterLi/ThreadPool.js
  5. All Echarts events are bound in worker, and send event data back to UI thread when triggered. In UI thread, DocumentFragment is used as an event bus.

Modify Echarts source code

  1. Add && !env.worker to disable hoverLayerThreshold in worker. See apache/echarts#13164
  2. Modify SaveAsImage.prototype.onclick to let it support OffscreenCanvas
  3. Optional: Remove UMD sh*t
  4. Optional: Modify tooltip.init to let it accept a customized TooltipContent implementation

See patch.diff

Known issues

  1. DataView because it operates DOM ( won't fix because few people use it )
  2. Group doesn't work (yet)

Demo

See Github Page: https://carterli.github.io/echarts-with-offscreencanvas/

Support Chrome 80+ ( due to using of module scripts on worker ). Fallback version support Safari & Firefox 67 ( because older FireFox versions and Edge lack dynamic import support )