Echarts中tooltips数据格式化（点击不同的lengend数据提示框中显示相应的单位）

最新推荐文章于 2025-06-21 16:09:48 发布

原创最新推荐文章于 2025-06-21 16:09:48 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #tootips #formatter

Echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts的tooltip.formatter属性通过回调函数实现数据单位的格式化显示，详细解析了params对象的属性，并提供了针对不同系列名称进行单位转换的代码示例。

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

# EchartsAPI入口：http://echarts.baidu.com/option.html#title

1. 效果图：

官方文档：http://echarts.baidu.com/option.html#tooltip.formatter

2. 通过formater回调函数实现单位格式化

第一个参数 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）通过alert()查看params数据集中的各项属性（原文地址：https://blog.youkuaiyun.com/dreamsup/article/details/56667330）

formatter: function (params) {
    alert(JSON.stringify(params));
}

也可以在页面打断点查看params中的各项数据

（2）编写代码，通过判断数据集中seriesName 的名称对单位格式化

tooltip : {
			trigger : 'axis',
			formatter : function(params) { //数据单位格式化
			var relVal = params[0].name; //x轴名称
					if (params[0].seriesName == "总能耗") {
						relVal = params[0].name
								+ '<br/>'
								+ params[0].seriesName
								+ ' : '
								+ params[0].value
								+ " kgce";
					} else if (params[0].seriesName == "耗水量") {
								relVal = params[0].name
										+ '<br/>'
										+ params[0].seriesName
										+ ' : '
										+ params[0].value
										+ " 吨";
							} else if (params[0].seriesName == "耗电量") {
										relVal = params[0].name
												+ '<br/>'
												+ params[0].seriesName
												+ ' : '
												+ params[0].value
												+ " kW‧h";
											}
										} 
										return relVal;
									}
								},
								legend : {
									'data' : [ '总能耗', '耗水量', '耗电量'/* ],
									'selected' : {
										'总能耗' : echarIsSelectTotal,
										'耗水量' : echarIsSelectWater,
										'耗电量' : echarIsSelectEle
									},
									selectedMode : "single"
								},