Echarts的tooltip显示自定义格式化解决方案

boyanx4个月前技术教程15

前言

今天甲方爸爸提出了要求,需要把图表显示的数据保留百分数的小数点后一位。实际上这个显示的问题之前在后台处理数据的时候就处理过,当时是没有保留小数的。后来要求保留小数点后一位就在后台处理了,谁知道,在前台展示的时候,莫名的出现小数点后十几位数,只能在前台通过JS再处理一遍了。

series 格式化

要解决显示问题,第一步先对series进行显示格式化处理,在对应的series添加:

label:{

normal:{

show:true,

position:'inside',

formatter: function(v){

return Number(v.data).toFixed(1)+'%';

}

}

}

然而,设置好了series的数据格式化,显示也达到了预期。但是在移动鼠标时,发现提示框仍然显示出多位小数,才发现没有对tooltip进行处理。

tooltip显示自定义

翻阅官方文档发现有两种方式:

1】字符串模板

示例:formatter: '{b0}: {c0}<br />{b1}: {c1}'

最开始我是直接用的这种方法,但是现在需要对值在进行处理,所以这种方法无法满足我的需求。

2】回调函数

params的数据格式如下:

需要获取的是:seriesName,name,value

需要注意的是,以上的都是基于echarts4.0版本以上

标签: echarts模板

相关文章

基于Java的企业会计核算信息化管理系统的设计与实现:附论文+代码

1. 为什么这个毕设项目值得你 pick ?企业会计核算信息化智慧管理系统的设计与实现全面解析,以Java技术为核心构建。系统涵盖公司管理、货币管理、会计科目及凭证等13个主要功能模块,旨在提升企业管...

开源免费、美观实用的后台管理系统模版,简单轻量、开箱即用!

项目介绍Art Design Pro是一款开源免费(基于MIT license开源协议)、美观实用的后台管理系统模版,专注于用户体验和快速开发的开源后台管理解决方案。基于 ElementPlus 设计...

教你VUE+ECharts实战(附程序)(echarts-vue)

各位同学,大家好。前面课程教大家使用ECharts来开发可视化图表。从本次课开始,我们介绍在VUE前端框架下,开发可视化图表的方法。01 什么是VUE?vue是一个构建用户界面UI的渐进式javasc...

Deepseek竟然还能制作图表,真的太好用了!

今天跟大家分享下如何使用Deepseek来生成图表,操作也非常简单,我们只需要找到自己想要的图表模板,再替换为自己的数据就可以了。下面的图表都是deepseek生成的。我们来看下具体怎么做。一、了解E...

PPT中的动态图表你还不会?用AI做PPT第二期

Hello大家好这期是我们使用AI做PPT的第二期给大家带来的是动态表格制作大家也知道,虽然Deep Seek有强大的思考能力,但是生成制作不了PPT,不过可以通过HTML代码来生成图表!!将我们的数...

【重磅】JimuReport 积木报表 v2.0 版本发布,免费可视报表

项目介绍JimuReport 积木报表,是一款免费的数据可视化报表,含报表、打印、大屏和仪表盘,像搭建积木一样完全在线设计!功能涵盖:复杂报表、打印设计、图表报表、门户设计、大屏设计等!Web 版报表...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。