echarts百分比计算

原始需求:需要在环形图中心固定显示在线率。

echarts环形图默认可以在环形中心显示各种百分比率,鼠标浮动到哪里就显示哪个的百分比,但是不符合项目需求。项目需要固定只显示在线率。则需要自定义显示环形图中心的百分比。

实现方式:在 echarts 配置中增加 graphic项,text 属性设置为计算得到的百分比即可。

其中,百分比计算方式:let fonline = online * 100 / total;   fonline = fonline.toFixed(2);   看似很简单,但是得到的结果却总是不能与 echarts 的结果保持一致。

在线率显示

如上图,中间是我自己算的结果,右下角是鼠标浮动显示的 tooltip,也就是 echarts 计算的结果。

通过实验观察,echarts 不仅仅取小数点后两位那么简单,当小数后面存在零时,则要把零去掉,也就是出现这样几种情况:

1、出现多于2位的小数,则四舍五入保留小数点后2位,如 87.34%。

2、少于2位的小数,则根据实际情况得到值,不能出现末尾是 0 的情况,如 85.5%,85%。

所以想到使用正则表达式去掉多余的小数点和零,先将 fonline 转换为字符串,然后正则替换。

let exp = /\.{0,1}0+$/g;

fonline = fonline.replace(exp, "");

结果与 echarts 完全相同。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容