echarts百分比计算

Posted 2023-03-22

参考技术A 原始需求：需要在环形图中心固定显示在线率。

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,10+$/g;

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

结果与 echarts 完全相同。

echarts怎么设置图形在整个echarts里面的位置，一直居中不太灵活

参考技术A series下有个center属性，可以控制圆心坐标。圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50%，具体参见api文档。