(本文档仅供参考)
问题
自助仪表盘怎么实现色块告警需求,例如圆形/方块的色块指标,根据出勤率指标不同告警不同的背景色。
解决方案
圆形告警:可使用饼图+扩展属性实现
{ "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)+'% '}" } } ] }