如何使用仪表盘控件原创
金蝶云社区-丨Nick丨
丨Nick丨
7人赞赏了该文章 2,175次浏览 未经作者许可,禁止转载编辑于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
7人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!