自定义设置图例组件图例形状

要自定义设置图例组件的图例形状，可以使用 `legendHandler` 函数来自定义绘制图例的方式。下面是一个示例代码：

const legendHandler = (legend, canvas) => {
  canvas.lineWidth = 2;
  canvas.strokeStyle = legend.fillStyle;
  canvas.beginPath();
  canvas.moveTo(-legend.width / 2, 0);
  canvas.lineTo(legend.width / 2, 0);
  canvas.stroke();
};

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    legend: {
      labels: {
        usePointStyle: true,
        generateLabels: (chart) => {
          const labels = Chart.defaults.global.legend.labels.generateLabels(chart);
          labels.forEach((label) => {
            label.legendItem.boxWidth = 10;
            label.legendItem.boxHeight = 2;
            label.legendItem.lineWidth = 2;
            label.legendItem.fillStyle = label.fillStyle;
            label.legendItem.strokeStyle = label.strokeStyle;
          });
          return labels;
        },
      },
      onHover: (e, legendItem) => {
        e.target.style.cursor = 'pointer';
      },
      onLeave: (e, legendItem) => {
        e.target.style.cursor = 'default';
      },
      handler: legendHandler,
    },
  },
});

在上面的代码中，我们自定义了一个 `legendHandler` 函数来绘制图例形状。这个函数接收两个参数：`legend` 和 `canvas`。`legend` 是一个对象，包含了图例的相关信息，如宽度、高度、颜色等；`canvas` 则是一个 HTML5 canvas 元素，用于绘制图例。

在 `legendHandler` 函数中，我们首先设置了绘制图例的线条的宽度和颜色。然后，我们使用 canvas 绘制了一条从左到右的直线，长度为图例的宽度。这个直线就是我们自定义的图例形状。

最后，我们在 Chart.js 的配置项中将 `legend.handler` 设置为我们自定义的 `legendHandler` 函数即可。同时，我们也可以在 `generateLabels` 函数中修改图例的宽度、高度、线条宽度等属性，以适应我们自定义的图例形状。