ECharts中formatter参数如何实现tooltip显示自定义内容？

Question

在使用ECharts时，如何通过formatter参数自定义tooltip内容以满足特定需求？默认情况下，tooltip仅显示基本数据信息，但借助formatter函数或字符串，可灵活定制显示内容。例如，添加单位、格式化日期或数值、突出显示某些数据等。问题是：当数据系列复杂（如包含多个维度或图表类型混合）时，如何利用formatter动态生成符合业务逻辑的tooltip内容，同时保持代码简洁易维护？此外，若需在tooltip中加入HTML元素（如图标、链接）以增强交互性，应如何正确设置与兼容？这些问题直接影响用户体验和功能实现的灵活性。

Answer 1

1. ECharts Tooltip Formatter 基础使用

在ECharts中，tooltip的formatter参数是自定义提示框内容的核心工具。它可以通过字符串或函数形式指定显示内容。以下是基础用法：

• 字符串模板：适合简单的格式化需求，如添加单位。
• 函数模式：适合复杂的业务逻辑，可以动态生成内容。

tooltip: {
        formatter: '{a} {b}: {c} 单位'
    }

当数据系列简单时，字符串模板足够满足需求，但随着维度增加，推荐使用函数模式以提高灵活性。

2. 复杂数据系列下的Formatter设计

当图表包含多个维度或混合类型时，formatter需要处理更复杂的数据结构。以下是一个示例：

Series Name	Value	Unit
Sales	123456	RMB
Profit	10%	%
Date	2023-01-01	-

代码实现如下：

tooltip: {
        formatter: function (params) {
            let res = '';
            params.forEach(param => {
                if (param.seriesName === 'Sales') {
                    res += `销售额：${param.value} RMB
`;
                } else if (param.seriesName === 'Profit') {
                    res += `利润率：${param.value}%
`;
                } else if (param.seriesName === 'Date') {
                    res += `日期：${param.value}
`;
                }
            });
            return res;
        }
    }

3. 在Tooltip中加入HTML元素

ECharts支持在tooltip中嵌入HTML元素，以增强交互性。例如，添加图标或链接：

tooltip: {
        formatter: function (params) {
            return `${params.name}

                   销售额： ${params.value} RMB

                   查看详情`;
        },
        extraCssText: 'white-space: pre-wrap;'
    }

注意：extraCssText属性用于设置tooltip的CSS样式，确保HTML正确渲染。

4. 兼容性与性能优化

在实际项目中，需考虑不同浏览器的兼容性和性能问题：

1. 避免过多DOM操作，保持tooltip内容简洁。
2. 对于大数据量图表，可启用tooltip.triggerOn='mousemove'以减少计算开销。

以下流程图展示了tooltip生成的逻辑：

mermaid
graph TD
    A[用户鼠标悬停] --> B{是否启用tooltip}
    B --是--> C[获取当前数据点]
    C --> D[解析数据并调用formatter]
    D --> E[生成HTML内容]
    E --> F[渲染到页面]
    B --否--> G[忽略事件]