ECharts中markPoint标注如何修改默认符号或使用自定义符号

我使用ECharts生成图表，需要为特定事件添加符号标注。目前我已实现图表最大值、最小值的标注功能，但当前使用的是markPoint默认符号，希望了解是否可以更换为其他类型符号，或是添加使用自定义符号。

我在代码中使用了如下配置：

markPoint: {
  data: [
    { type: 'max', name: 'Max' },
    { type: 'min', name: 'Min' }
  ]
}

配置后的运行效果如下图所示：

回答 #

ECharts的markPoint原生支持替换符号，不管是内置预设样式还是完全自定义的符号都可以实现，核心是配置symbol属性，具体用法如下：

• 使用内置符号
  ECharts自带了8种常用符号，直接给symbol传对应字符串即可，可选值包括：circle（圆形，默认值）、rect（矩形）、roundRect（圆角矩形）、triangle（三角形）、diamond（菱形）、pin（定位钉样式）、arrow（箭头）、none（不显示符号）。
  给所有标注点统一设置符号，直接把配置写在markPoint根层级即可：

  markPoint: {
    symbol: 'pin',
    symbolSize: 22, // 可自定义符号尺寸，支持传数字或者[宽,高]数组
    data: [
      { type: 'max', name: 'Max' },
      { type: 'min', name: 'Min' }
    ]
  }
  

  如果需要给最大值、最小值设置不同的符号，把symbol配置写在对应data项中即可，单条配置的优先级高于全局配置：

  markPoint: {
    data: [
      { type: 'max', name: 'Max', symbol: 'arrow', symbolSize: 25, itemStyle: { color: '#ff4d4f' } },
      { type: 'min', name: 'Min', symbol: 'diamond', symbolSize: 20, itemStyle: { color: '#52c41a' } }
    ]
  }
  

• 使用自定义符号
  内置样式不满足需求时，还支持两种自定义符号的写法：

  1. 图片符号：格式为image://图片访问地址，支持本地静态资源路径、可正常访问的线上图片地址
  2. SVG矢量符号：格式为path://SVG路径字符串，这种方式不会出现图片模糊问题，也不需要额外加载外部资源
     示例配置：

  markPoint: {
    data: [
      {
        type: 'max',
        name: 'Max',
        // 用自定义SVG三角形作为标注符号
        symbol: 'path://M12 2L2 22h20L12 2z',
        symbolSize: 28
      }
    ]
  }
  

注意：如果配置后不生效，优先检查ECharts版本，上述配置在ECharts 4.x、5.x全版本支持，SVG路径自定义符号在3.x版本也可正常使用。

内容的提问来源于stack exchange，提问作者Aymen Tilfani