页面树结构
转至元数据结尾
转至元数据起始

(本文档仅供参考)


问题

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占用率】这个指标名称的位置,可以在组件设置中对【标题】进行设置



  • 无标签