eacharts markPoint 设置多个svg

如果您要在 ECharts 中设置多个 `markPoint` 并且每个 `markPoint` 都包含一个 SVG 图形，您可以在 `data` 中为每个 `markPoint` 指定一个 `symbol`，并在 `symbol` 中定义一个包含 SVG 图形的 `<div>` 元素。例如：

option = {
  // ... 其他配置项 ...
  series: [
    {
      name: '访问量',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      markPoint: {
        data: [
          {
            name: '最高点',
            value: 1290,
            xAxis: 4,
            yAxis: 1290,
            symbol: `
              <div>
                <svg width="32" height="32">
                  <circle cx="16" cy="16" r="16" fill="#ff0000" />
                </svg>
              </div>
            `
          },
          {
            name: '最低点',
            value: 820,
            xAxis: 0,
            yAxis: 820,
            symbol: `
              <div>
                <svg width="32" height="32">
                  <rect x="0" y="0" width="32" height="32" fill="#00ff00" />
                </svg>
              </div>
            `
          }
        ]
      }
    }
  ]
};

在上面的代码中，我们为 `markPoint` 中的每个点指定了一个 `symbol`，其中包含一个用于呈现 SVG 图形的 `<div>` 元素。`<div>` 元素中的 SVG 图形可以使用标准的 SVG 代码编写，以及 CSS 样式来设置 SVG 图形的样式。

在 ECharts 中使用 SVG 图形时，需要注意一些细节问题。首先，需要使用反引号（`）来定义 `symbol` 字符串，以便可以在字符串中包含换行符和其他特殊字符。其次，由于 `<div>` 元素中包含了 SVG 图形，因此需要为 `<div>` 元素设置一些 CSS 样式，以便正确呈现 SVG 图形。例如，我们可以为 `<div>` 元素设置以下 CSS 样式：

div {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
}

这些样式将 `<div>` 元素设置为一个 32x32 的块级元素，并使其中的 SVG 图形垂直和水平居中对齐。

最后，需要注意的是，如果您想在 SVG 图形中使用事件或动画效果，可以将 SVG 图形保存为单独的文件，并使用 `<img>` 元素来引用它们。然后，您可以在 `symbol` 中使用 `<img>` 元素来指定 SVG 图形的路径。例如：

symbol: '<img src="path/to/your/svg/file.svg" />'

这样做可以使 SVG 图形的代码更简洁，同时也可以让 SVG 图形的事件和动画效果更易于管理。