ECharts折线图tooltip提示框格式自定义

最新推荐文章于 2025-05-09 16:03:32 发布

resign007

最新推荐文章于 2025-05-09 16:03:32 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts

原文链接：https://blog.youkuaiyun.com/qq_35542141/article/details/78424607

本文详细解析了ECharts中tooltip.formatter的使用方法，包括字符串模板和回调函数两种形式，适用于折线图、柱状图、饼图等多种图表类型，通过实例展示了如何定制提示框浮层的内容格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tooltip.formatter

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

1、字符串模板

模板变量

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

2、回调函数
回调函数格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一个参数params是formatter需要的数据集，格式如下：
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,

// 饼图的百分比
percent: number,
}

自定义实例：

1、

formatter : '{b}<br/>{a} : {c}%',

2、

formatter : function(params) {
        var result = params[0].name;
        params.forEach(function(item) {
                if (item.data) {
                    result += '<br/>' + item.seriesName + ' : ' + item.data + '%';
                }
            });
        return result;
    }

3、

formatter: function(params) {
        var result = params[0].name+'<br>';
        params.forEach(function(item) {
                        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                            if(parseFloat(item.data)>=0){
                                result +=item.seriesName+" : "+'<span style="color:#e30101">'+ item.data+"%</span><br>"
                            }else if(parseFloat(item.data)<0){
                                result +=item.seriesName+" : "+'<span style="color:#049500">'+ item.data+"%</span><br>"
                            }
            
                   });
         return result;
        }

————————————————
版权声明：本文为优快云博主「yhao2088」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_35542141/article/details/78424607