Highcharts折线图：如何在tooltip formatter中获取后端点标签

阿华AIGC实验室

2026-5-28

优雅解决ECharts折线图Tooltip自定义标签问题

我完全懂你把标签序列化塞进name字段再解析的痛苦——这种方式不仅可读性差，后期维护起来也容易出问题。其实ECharts本身就支持给每个数据点绑定自定义属性，直接在Tooltip的formatter函数里就能轻松获取，根本不用绕弯路！

具体实现步骤：

重构你的数据结构
把原本的平面数据转换成包含自定义属性的对象数组，让每个数据点直接携带对应的label信息：

const chartData = [
  { value: ['2018-05-21 08:00', 100], label: 'A description' },
  { value: ['2018-05-21 08:10', 50], label: 'Another one' },
  { value: ['2018-05-21 08:20', 900], label: 'Completely different' }
];

配置Tooltip的Formatter函数
在ECharts的配置项中，通过tooltip.formatter函数，直接从params.data里取出我们预先定义好的label属性：

option = {
  xAxis: {
    type: 'time',
    data: chartData.map(item => item.value[0])
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      // 直接获取自定义的label
      const label = params.data.label;
      // 组合成你需要的Tooltip内容
      return `
        <div>日期：${params.name}</div>
        <div>数值：${params.value[1]}</div>
        <div>描述：${label}</div>
      `;
    }
  },
  series: [
    {
      type: 'line',
      data: chartData // 直接传入处理好的数据数组
    }
  ]
};