【ECharts 实战】5分钟学会：巧设Legend与Tooltip，提升数据可视化体验

目录

引言

需求

示例代码概览

实战操作步骤

        1.重命名 Legend 中的系列名称

        2.重命名 Tooltip 中的系列名称

        实战效果

完整代码

---

引言

        在使用 ECharts 进行复杂的数据可视化过程中，定制图表元素以适应具体业务场景和用户需求至关重要。本文将通过一个直观的实例，带领我们在短短5分钟内掌握如何利用 ECharts 对图例（Legend）与提示框（Tooltip）中的系列名称进行个性化重命名，从而显著提升图表的可读性和满足用户的个性化需求。

---

需求

        假设我们面对着一个展示网站流量来源的折线图，其中包含五个不同渠道的数据系列，其中一个名为 'Email'。为了使信息传达更清晰、贴切，我们需要将图例中的 'Email' 更改为更具行业通用性的表述—— 'Message'，同时在鼠标悬停时显示的 tooltip 中也将 'Email' 修改为中文名 '邮件'。

---

示例代码概览

        以下代码是 ECharts 官网一个折线图示例的对应代码，可视化效果见下图所示；

---

实战操作步骤

        1.重命名 Legend 中的系列名称

        在 option.legend 的配置中设置 formatter 函数，针对传入的每个 name 参数判断是否为 'Email'，如果是，则将其替换为 'Message'：

legend: {
        formatter: function (name) {
          if (name === 'Email') {
            return 'Message';
          } else {
            return name;
          }
        },
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },

        2.重命名 Tooltip 中的系列名称

        对于 tooltip 内容的自定义，需要在 option.tooltip 的 formatter 函数中实现。由于 tooltip 可能会展示多个系列的数据，因此要根据不同情况处理：

tooltip: {
        formatter: function (params) {
          if (params && params.length > 0) {
            // 处理多系列数据的情况（params 是数组）
            let tipText = '';
            params.forEach(item => {
              if (item.seriesName === 'Email') {
                item.seriesName = '邮件'; // 在tooltip中将'Email'改为'邮件'
              }
              tipText += `${item.marker} ${item.seriesName}: ${item.data} 
`;
            });
            return tipText;
          } else if (params && params.componentType === 'series' && params.seriesIndex !== undefined) {
            // 处理单系列数据的情况（params 是对象）
            let seriesName = params.seriesName;
            if (seriesName === 'Email') {
              seriesName = '邮件';
            }
            return `${params.marker} ${seriesName}: ${params.data[1]}`; // 根据实际情况调整格式
          }
        },
        trigger: 'axis',
      },

        通过以上两个关键步骤的设置，我们的 ECharts 图表已经成功实现了 Legend 和 Tooltip 中系列名称的个性化重命名。这不仅有助于提升图表的信息传递效率，也使得整体视觉效果更加符合用户的认知习惯，进而提升了数据可视化的用户体验。

        实战效果

---

完整代码

---