如何使用仪表盘控件原创
金蝶云社区-丨Nick丨
丨Nick丨
7人赞赏了该文章 1852次浏览 未经作者许可,禁止转载编辑于2022年04月16日 09:47:36
封面

关键词:仪表盘

一、需求

苍穹仪表盘使用

二、思路与方案

在页面添加仪表盘控件,只能调节前端样式,包括大小、位置,功能后台实现

三、实现过程

在页面添加控件,后台插件实现

简单的学习了一下现在分享一个小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();


四、效果图

image.png

五、开发环境版本

3.0.003.39 | 3.0.003.39


六、注意事项

  该控件支持的配置很有限,重点放在data与detail

七、参考资料

echarts官网链接http://echarts.apache.org/zh/option.html#series-gauge


元数据和源代码在附件中


赞 7