Echartjs 中的 web worker 實現問題“無法在 'Worker' 上執行 'postMessage'：索引 0 處的值沒有可轉移類型。”

Question

誰能幫我實現一個 web 工人？

主要代碼：

dataset = "dataset" + document.getElementById("dataset").value
      const config = {
        xAxis: {
          type: 'category',
          data: Object.keys(window[dataset])
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: Object.values(window[dataset]),
            type: 'line'
          }
        ]
      };
      const worker1 = new Worker('worker/echarts1.worker.js');
      const canvasEl = document.getElementById("offscreenCanvas1");
      console.log(canvasEl);
      const offscreenCanvas = canvasEl.transferControlToOffscreen();
      worker1.postMessage({ canvas: offscreenCanvas, config }, [offscreenCanvas]);

Web 工人（echarts1.worker.js）

importScripts('https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js');

onmessage = function (event) {
    console.log("Started Worker");
    const { canvas, config } = event.data;
    const chart = new echarts.init(canvas);
    chart.setOption(config);
    console.log("Finished Worker");
};

執行時，我在控制台中遇到以下錯誤。

Answer 1

您正在傳輸（可能的）HTMLCanvasElement ( <canvas> )，而不是 OffscreenCanvas。

要從 HTMLCanvasElement 中獲取 OffscreenCanvas，您需要調用其.transferControlToOffscreen()方法：

const canvasEl = document.getElementById("chart-container1");
const offscreenCanvas = canvasEl.transferControlToOffscreen();
const worker1 = new Worker('echarts1.worker.js');
worker1.postMessage({ canvas: offscreenCanvas, config }, [offscreenCanvas]);

（如果 id 為""chart-container1"的元素不是<canvas> ，那么您需要改為定位一個。）