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

(本文档仅供参考)

问题

自助仪表盘怎么实现色块告警需求,例如圆形/方块的色块指标,根据出勤率指标不同告警不同的背景色。

解决方案

圆形告警:可使用饼图+扩展属性实现

{
	"visualMap": {
		"show": false,
		"type": "piecewise",
		"pieces": [
			{
				"lte": 0.79,
				"color": "red" //小于等于0.79显示红色
			},
			{
				"gte": 0.8,
				"lte": 0.99,
				"color": "orange" //大于等于0.8,小于等于0.99 显示橙色
			},
			{
				"value": 1,
				"color": "green" //1为绿色
			}
		],
		"calculable": true,
		"realtime": false
	},
	"series": [
		{
			"label": {
				"formatter": "function(arg){return arg.name+' \\n'+(arg.value*100).toFixed(0)+'% '}",
				"position": "center"
			}
		}
	],
	"animation": false
}


方块:热力图+扩展属性实现

{
	"xAxis": {
		"show": false,
		"axisLabel": {
			"show": false
		}
	},
	"yAxis": {
		"show": false,
		"axisLabel": {
			"show": false
		}
	},
	"grid": {
		"left": 10,
		"top": 10,
		"right": 10,
		"bottom": 10
	},
	"visualMap": {
		"show": false,
		"type": "piecewise",
		"pieces": [
			{
				"lte": 0.79,
				"color": "red"
			},
			{
				"gte": 0.8,
				"lte": 0.99,
				"color": "orange"
			},
			{
				"value": 1,
				"color": "green"
			}
		],
		"calculable": true,
		"realtime": false
	},
	"series": [
		{
			"label": {
				"formatter": "function(arg){return arg.name+' \\n'+(arg.value[2]*100).toFixed(0)+'% '}"
			}
		}
	]
}



  • 无标签