当前位置:首页 > 技术文章 > 正文内容

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

zonemu3个月前 (07-21)技术文章38

前言

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

相关文章

傻瓜式DEVOPS实践手册——Gitlab部署

GitLab是一款开放源代码的DevOps平台,用于实现从项目规划、源代码管理、CI/CD到监控和安全性的全方位集成。GitLab主要用于版本控制、协同开发、持续集成/持续部署 (CI/CD)、自动化...

配置GitLab流水线和门禁系统(gitlab工作流)

在项目开发的过程中,为了保证代码质量,我们会使用诸多代码质量检测工具,这些工具或是在本地,或是在云端,虽然工具可以检测出异常问题,但是这些问题还是需要我们程序员来修复,如果我们不强制所有人必须修复异常...

Jenkins 学习笔记(jenkins要学多久)

本学习笔记参考《Jenkins 2.x实践指南》。1. Jenkins 简介#Jenkins 是一款自动化的任务执行工具。通常用于持续集成/持续交付领域。可以通过界面或Jenkinsfile告诉Jen...

我的VIM配置(如何配置vim编辑环境)

写一篇关于VIM配置的文章,记录下自己的VIM配置,力求简洁实用。VIM的配置保存在文件~/.vimrc中(Windows下是C:\Users\yourname \_vimrc)。VIM除了自身可配置...

web前端入门:css+html5+javascript同时学可以吗?

HTML+CSS+JS是前端基础核心知识,肯定是都要学的。在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可。说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂...

数组、去重、排序、合并、过滤、删除

ES6数字去重 Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] [...new Set([1,2,3,3,4,4])] //[1,2,3,4]2...