如何为图表中的每个数据点创建自定义工具提示？

// 引入ECharts库
import echarts from 'echarts';

// 创建图表实例
const chart = echarts.init(document.getElementById('chart'));

// 监听鼠标悬停事件
chart.on('mouseover', function(params) {
  // 获取当前数据点的信息
  const data = params.data;

  // 生成自定义工具提示的内容
  const tooltipContent = `<div>${data.name}: ${data.value}</div>`;

  // 创建自定义工具提示的DOM元素
  const tooltip = document.createElement('div');
  tooltip.innerHTML = tooltipContent;
  tooltip.style.position = 'absolute';
  tooltip.style.left = params.event.offsetX + 'px';
  tooltip.style.top = params.event.offsetY + 'px';

  // 添加自定义工具提示到页面中
  document.body.appendChild(tooltip);
});

// 监听鼠标移出事件
chart.on('mouseout', function() {
  // 移除自定义工具提示
  const tooltip = document.querySelector('.custom-tooltip');
  if (tooltip) {
    tooltip.parentNode.removeChild(tooltip);
  }
});

// 设置图表配置和数据
const option = {
  // 图表配置...
  series: [{
    // 数据系列配置...
    data: [
      { name: '数据点1', value: 100 },
      { name: '数据点2', value: 200 },
      // ...
    ]
  }]
};

// 渲染图表
chart.setOption(option);