Apache ECharts散点图如何为每个数据点手动配置自定义标签

ECharts 散点图支持为每个数据点单独指定显示标签，不需要依赖额外插件，只需要调整series.data的数据格式即可实现和轴标签类似的自定义标注效果。

具体实现方法 #

方式1：逐点单独配置标签（灵活度最高） #

将原来二维数组格式的data项替换为对象结构：

• 用value字段存储点的[x轴坐标, y轴坐标]
• 在单个数据项内嵌套label配置，通过formatter指定该点要显示的自定义文本，单点位配置优先级高于全局label配置

修改后的完整可运行配置示例：

option = {
  xAxis: {
    data: ['Low', 'Med', 'High'],
    name: "Value",
  },
  yAxis: {
    min: '5',
    name: "Score",
  },
  series: [
    {
      type: 'scatter',
      symbolSize: 20,
      data: [
        // 每个点的formatter值可替换为你实际需要显示的标签文本
        {value: [2,9.8], label: {formatter: '样本1'}},
        {value: [1,8.8], label: {formatter: '样本2'}},
        {value: [2,5.9], label: {formatter: '样本3'}},
        {value: [1,9.8], label: {formatter: '样本4'}},
        {value: [1,10.0], label: {formatter: '满分点1'}},
        {value: [3,9.8], label: {formatter: '样本6'}},
        {value: [2,10.0], label: {formatter: '满分点2'}},
        {value: [1,9.8], label: {formatter: '样本8'}},
        {value: [2,5.9], label: {formatter: '样本9'}},
        {value: [1,9.8], label: {formatter: '样本10'}}
      ],
      label: {
        show: true,
        position: 'right',
        color: "black",
        fontSize: 16,
      },
    }
  ],
  grid:{
    show: true,
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: 'rgb(255, 102, 102)'
    },
    {
      offset: 1,
      color: 'rgb(153, 255, 153)'
    }])
  },
};

方式2：全局配置formatter读取自定义字段（适合批量配置场景） #

如果需要配置标签的点数量较多，可以在每个数据项里加自定义字段存储标签文本，在全局label的formatter里统一读取，不需要每个点重复写label配置：

series: [
  {
    type: 'scatter',
    symbolSize: 20,
    data: [
      // 自定义tag字段存储要显示的标签
      {value: [2,9.8], tag: '样本1'},
      {value: [1,8.8], tag: '样本2'},
      // 其余数据项按相同格式补充tag字段即可
    ],
    label: {
      show: true,
      position: 'right',
      color: "black",
      fontSize: 16,
      // 全局统一读取自定义tag字段作为显示文本
      formatter: function(params) {
        return params.data.tag
      }
    },
  }
]

注意：你当前配置中x轴类目只配置了Low/Med/High3项，对应x轴索引为0/1/2，现有数据里存在x坐标为3的点，会超出x轴现有类目范围，需要的话可以在xAxis.data里补充第4个类目，或调整对应点的x坐标值。

内容的提问来源于stack exchange，提问作者J.B.