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

# 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 中的 indexseriesIndex: number,// 系列名称seriesName: string,// 数据名，类目名name: string,// 数据在传入的 data 数组中的 indexdataIndex: number,// 传入的原始数据项data: Object,// 传入的数据值value: number|Array,// 数据图形的颜色color: string,// 饼图的百分比percent: number,}

（1）通过alert()查看params数据集中的各项属性（原文地址：https://blog.csdn.net/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"},

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

echarts 饼图每块颜色_读者提问，如何让 tooltip 提示框内显示饼图
效果截图前些天有读者问,ECharts 的提示框(tooltip)内,能不能添加一个饼图? 我之前倒是看到过用饼图作为散点图数据点的例子,感觉应该有办法--但是提示框和那个不太一样,估计需要研究一下 ...
基于列表框的简单选课窗体开发。编写Windows应用程序，设计实现一个简单选课系统，要求：（1）点击“添加”按钮，将把在第一文本框中的输入的课程名称添加到左边的列表框中，且所添加的课程不能为空，不能
基于列表框的简单选课窗体开发.编写Windows应用程序,设计实现一个简单选课系统,要求: (1)点击"添加"按钮,将把在第一文本框中的输入的课程名称添加到左边的列表框中,且所添加 ...
html中如何写一个提示框,html弹出公告 html中点击列表文字弹出提示框？
怎么在网页制作中给主页设置弹出公告,要CSS布局HTML小编今天和大家分享在主页打... 无标题文档 45565 把style属性加给你的弹窗标签就可以了,宽高位置均可变. 哪位前辈高手有html的窗 ...
echarts隐藏掉一条曲线，并且tooltip提示框中不显示
echarts隐藏掉一条曲线,并且tooltip提示框中不显示两步走: 1.隐藏掉一条曲线 series: [{name: '...',type: 'line',symbolSize: 0, // ...
将对话框(提示框)中的内容粘贴到记事本
将对话框(提示框)中的内容粘贴到记事本: Ctrl+All Ctrl+C Win+R notepad Ctrl+V 几个步骤搞定这样就能整个复制到百度上查询相关帮助了,再也不用自己一个个打字了. 转 ...
ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景
一. 代码环境 "react": "18.1.0", "antd": "^4.20.5", "typescri ...
Unity3D中角色撞击物体弹出提示框或显示对象效果
角色撞击物体弹出提示框或显示对象效果刚开始使用的是调用SetActive方法例: 在Start()函数中设置对象的SetActive属性为false,在函数 void start() {gameo ...
驱动器中的软盘不对_在“提示”框中：基于位置的待办事项提醒，DIY软盘驱动器音乐以及易于访问的产品手册...
驱动器中的软盘不对 Once a week we round up some great tips from the HTG tip box and share them with you; this ...
Echarts提示框自定义显示百分号
Echarts提示框自定义显示百分号 tooltip: {trigger: 'axis',formatter: '{b0}<br/>' +'<span style="dis ...
Vue中提示框慢慢显示和慢慢消失方法
Vue中提示框慢慢显示和慢慢消失方法 Vue提供了一个标签属性transition,直接使用就可以了: 用transition标签把需要慢慢显示的组件包起来. 然后在目前组件下面的style属性里面添 ...

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

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

1. 效果图：

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

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

最新文章

热门文章