关键词:仪表盘
一、需求
苍穹仪表盘使用
二、思路与方案
在页面添加仪表盘控件,只能调节前端样式,包括大小、位置,功能后台实现
三、实现过程
在页面添加控件,后台插件实现
简单的学习了一下现在分享一个小demo
代码参考了条形图跟echarts官网
// 声明一个仪表盘对象
GaugeChart chart = this.getControl("kdec_gaugechartap");
GaugeSeries gaugeSeries = chart.createSeries("gauge");
gaugeSeries.setType(ChartType.gauge);//构造为扇形
Map<String, Object> map = new HashMap<String, Object>();
map.put("formatter", "{value}%");
// map.put("show", false);
gaugeSeries.setDetail(map);
ItemValue itemValue = new ItemValue("test", 55);
ItemValue itemValue1 = new ItemValue("test1", 66);
ItemValue[] itemValues = new ItemValue[] {itemValue,itemValue1};
gaugeSeries.setData(itemValues);
chart.refresh();
四、效果图
五、开发环境版本
3.0.003.39 | 3.0.003.39
六、注意事项
该控件支持的配置很有限,重点放在data与detail
七、参考资料
echarts官网链接http://echarts.apache.org/zh/option.html#series-gauge
元数据和源代码在附件中
GaugeDemo.zip(3.32KB)
推荐阅读