(本文档仅供参考)
问题
V10.5以上版本想实现环形进度图,该如何实现呢?
解决方案
我们可以使用油量图并结合扩展属性的方式来实现。注:以下方案适用于【自助仪表盘】与【大屏可视化】中的油量图
1、首先创建一个油量图,并配置好数据
2、将以下扩展属性复制到油量图的扩展属性中。
{ "series": [ { "startAngle": 90, "endAngle": -270, "pointer": { "show": false }, "radius": "85%", "progress": { "show": true, "overlap": false, "roundCap": true, "clip": false, "itemStyle": { "borderWidth": 0, "borderColor": "#464646" } }, "axisLine": { "lineStyle": { "show": false, "width": 20 } }, "splitLine": { "show": false }, "axisTick": { "show": false }, "axisLabel": { "show": false }, "detail": { "offsetCenter": [ 0, 0 ] }, "max": 1 } ] }
效果如下:
代码说明
3、设置表盘,将原本表盘的3段删除到只剩下一段。并且修改颜色
原始:
修改后:
效果如下:
4、修改指标名称位置
如果需要修改【CPU占用率】这个指标名称的位置,可以在组件设置中对【标题】进行设置