原始需求:需要在环形图中心固定显示在线率。
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 完全相同。