网站首页 > 技术文章 正文
前言
今天甲方爸爸提出了要求,需要把图表显示的数据保留百分数的小数点后一位。实际上这个显示的问题之前在后台处理数据的时候就处理过,当时是没有保留小数的。后来要求保留小数点后一位就在后台处理了,谁知道,在前台展示的时候,莫名的出现小数点后十几位数,只能在前台通过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 (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)