如何在ECharts Tooltip中通过字符串模板正确获取数据？

问题说明 #

使用ECharts Tooltip的字符串模板配置时，获取到的是原始数组结构，无法实现官方示例中清晰格式化的数据展示效果。

解决方案（基于ECharts堆叠折线图示例逻辑） #

参考的堆叠折线图示例核心是通过Tooltip的formatter配置来格式化数据，以下是适配需求的具体调整：

1. 字符串模板直接格式化 #

如果你的数据结构是{name: '系列名', value: [X轴值, 数值]}这类格式，可通过指定模板字段来避免显示数组：

tooltip: {
  trigger: 'axis',
  formatter: '{b}<br/>{a}: {c}'
}

• {b}：对应X轴的类目文本
• {a}：对应当前数据的系列名称
• {c}：ECharts会自动解析数组为可读格式；若需取数组中特定元素，比如第二个值，可写{c[1]}

2. 函数自定义格式化（更灵活） #

如果字符串模板无法满足需求，用函数直接处理数组数据，完全自定义展示内容：

tooltip: {
  trigger: 'axis',
  formatter: function(params) {
    let tipContent = params[0].name + '<br/>';
    params.forEach(item => {
      // 按需处理数组，这里示例取数组第二个元素展示
      tipContent += `${item.seriesName}: ${item.value[1]}<br/>`;
    });
    return tipContent;
  }
}

关键注意点 #

• 确认数据结构与配置匹配：官方示例中每个系列的value为单值或可被自动解析的数组，若你的数据结构特殊，需对应调整模板或函数逻辑
• 检查trigger配置：折线图通常用trigger: 'axis'来聚合同一X轴下的所有系列数据；单系列场景可使用trigger: 'item'

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