为了满足客户端展示图表的需要在客户端引入了前端ECharts图表框架。开发人员可以在任意的界面嵌入图表极大丰富了交互体验。

发布版本：EAS8.8

上线日期：2022/10/31

补丁号：EAS8.8安装包

新特性介绍

• 允许客户端在任意界面嵌入前端的ECharts图表。
• 具有和前端ECharts图表一样的展示效果和兼容性。
• 可以设置响应图表事件。
• 编码简单一端编写多端显示。

特性效果展示

下面用例子展示如何使用高级图表控件和其显示效果。

1. 在使用前需要引入ctrl_ext.jar和ECharts-3.0.0.6.jar，可以在客户端安装路径client/lib下面获取。

2. 在界面嵌入ECharts显示面板代码如下：

//创建数据，可以参考ECharts官网的Option操作https://echarts.apache.org/zh/option.html#title
private Option getOption()
{
Option p = new GsonOption();
CategoryAxis caxis = new CategoryAxis();
caxis.setData(Arrays.asList("一月","二月","三月","四月","五月","六月","七月"));
p.title().setText("上半年生产值");
p.title().textStyle().setFontSize(24);
p.xAxis().add(caxis);
p.yAxis().add(new ValueAxis());
p.tooltip().trigger(Trigger.axis);
p.tooltip().axisPointer().type(PointerType.shadow);
p.legend().data(Arrays.asList("2020年","2021年"));
Bar bar1 = new Bar();
bar1.name("2020年");
bar1.setData(Arrays.asList(120,200,150,80,70,110,130));
Bar bar2 = new Bar();
bar2.name("2021年");
bar2.setData(Arrays.asList(50,120,200,30,120,60,150));
p.series().add(bar1);
p.series().add(bar2);
DataZoom sDataZoom = new DataZoom();
sDataZoom.type(DataZoomType.slider);
p.dataZoom(sDataZoom);
return p;
}

//在初始化页面布局的地方加入图表控件
this.setLayout(new BorderLayout());
this.setCustomInsets(new Insets(10, 10, 10, 10));
this.add(kDSplitPane1, BorderLayout.CENTER);
this.setPreferredSize(new Dimension(1013, 629));
_rightPane = new KDPanel(new BorderLayout());
_rightPane.setCustomInsets(new Insets(0, 0, 0, 0));
kDSplitPane1.add(_rightPane, "right");
//使用builder来创建图表控件
EChartDisPlayPanelBuidler buidler = EChartDisplayPanel.getBuidler();
//设置图表就绪回调，当图表准备就绪时会执行onReady方法
buidler.charReadyFunction(b->{
//这里使用工具类将Option对象转换成JS代码并执行
b.execute(TransferUtils.getExecuteStr(getOption(), true));
}
);
//将图表加入到面板中
_rightPane.add(buidler.build().getDisplayPanel());

运行效果如下：

不同终端下显示效果如下：

手机移动设备：

客户端报表：

门户Web端: