EnlightenCode

ECharts 中 Tooltip 的格式化技巧 ​

在使用 ECharts 过程中，tooltip 的格式化是一个常见需求。本文将介绍两种主要的格式化方式，并通过实例详细说明其使用方法。

1. 字符串模板格式化 ​

这是官方推荐的简单格式化方法。

模板语法规则 ​

字符串模板规则

示例代码 ​

javascript
tooltip: {
    formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
}

效果展示 ​

字符串模板格式化效果

注意：模板中的 a、b、c 对应的具体值需要根据后端返回的数据结构来确定。

2. 回调函数格式化 ​

当需要更灵活的格式化方式时，回调函数是更好的选择。

示例代码 ​

javascript
tooltip: {
    formatter: params => {
        let res = `<div><p>${params[0].axisValue}</p></div>`;
        
        for (let i = 0; i < params.length; i++) {
            let tempNum = $Fw.util.Format.fmtInterest(Number(params[i].value), 2, 100);
            
            // 根据数值添加颜色
            tempNum = params[i].value > 0 
                ? `<span style="color:red;">${tempNum}</span>`
                : `<span style="color:green;">${tempNum}</span>`;
            
            if (params[i].data !== undefined) {
                res += `<p>${params[i].marker}${params[i].seriesName}: ${tempNum}</p>`;
            }
        }
        return res;
    }
}

效果展示 ​

回调函数格式化效果

关键参数说明 ​

  • params[i].marker: 图例标记
  • params[i].seriesName: 系列名称
  • params[i].value: 数据值
  • params[i].axisValue: 坐标轴值

3. Y轴格式化 ​

Y轴的格式化方式与 tooltip 的回调函数格式化类似，可以根据具体需求自定义格式化函数。

提示：选择哪种格式化方式主要取决于你的具体需求。如果是简单的格式化，使用字符串模板就足够了；如果需要更复杂的逻辑处理，建议使用回调函数方式。