网站首页 > 技术文章 正文
前言
今天甲方爸爸提出了要求,需要把图表显示的数据保留百分数的小数点后一位。实际上这个显示的问题之前在后台处理数据的时候就处理过,当时是没有保留小数的。后来要求保留小数点后一位就在后台处理了,谁知道,在前台展示的时候,莫名的出现小数点后十几位数,只能在前台通过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版本以上
猜你喜欢
- 2024-10-12 安详解在vue中使用echarts图表实例代码
- 2024-10-12 echarts两点连线,中间没有数值情况下实现连线,x轴标题超长解决
- 2024-10-12 ECharts—百度可视化图表插件(echarts数据可视化网站)
- 2024-10-12 vue之将echart封装为组件(vue echart 组件)
- 2024-10-12 百度echarts使用(百度 echarts)
- 2024-10-12 「ECharts 术语速查手册」简介(echarts emphasis)
- 2024-10-12 分享7个常用的echarts示例(echarts介绍)
- 2024-10-12 Vue实战090:Vue使用ECharts图表详解
- 2024-10-12 9、echarts 在 vue 中怎么引用?(必会)
- 2024-10-12 Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)