页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(本文档仅供参考)


问题

V10.5以下版本想实现环形进度图,该如何实现呢?5以上版本想实现环形进度图,该如何实现呢?


解决方案

我们可以使用油量图并结合扩展属性的方式来实现。注:以下方案适用于【自助仪表盘】与【大屏可视化】中的油量图

...

代码块
languagejs
{
	"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
		}
	]
}

效果如下:


代码说明

Image Added


3、设置表盘,将原本表盘的3段删除到只剩下一段。并且修改颜色

...