在java EE中怎么使用Echarts

在java EE中怎么使用Echarts,第1张

@Override

public Option selectRemoveCauses() throws BusinessException {

//查询前20

PageHelperstartPage(1, 20, false);

//数据库查询获取统计数据

List<Map<String, Object>> list = kc22MapperselectRemoveCauses();

//为了数据从大到小排列,这里需要倒叙

Collectionssort(list, new Comparator<Map<String, Object>>() {

@Override

public int compare(Map<String, Object> o1, Map<String, Object> o2) {

return -1;

}

});

//创建Option

Option option = new Option();

optiontitle("剔除药品")tooltip(Triggeraxis)legend("金额(元)");

//横轴为值轴

optionxAxis(new ValueAxis()boundaryGap(0d, 001));

//创建类目轴

CategoryAxis category = new CategoryAxis();

//柱状数据

Bar bar = new Bar("金额(元)");

//饼图数据

Pie pie = new Pie("金额(元)");

//循环数据

for (Map<String, Object> objectMap : list) {

//设置类目

categorydata(objectMapget("NAME"));

//类目对应的柱状图

bardata(objectMapget("TOTAL"));

//饼图数据

piedata(new PieData(objectMapget("NAME")toString(), objectMapget("TOTAL")));

}

//设置类目轴

optionyAxis(category);

//饼图的圆心和半径

piecenter(900,380)radius(100);

//设置数据

optionseries(bar, pie);

//由于药品名字过长,图表距离左侧距离设置180,关于grid可以看ECharts的官方文档

optiongrid()x(180);

//返回Option

return option;

}

代码中的注释很详细。

Service返回Option后,在Controller层返回,Controller层代码如下:

[java] view plain copy 在CODE上查看代码片派生到我的代码片

@RequestMapping(" >

1、 Echarts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11),Chrome,Firefox,Safari等。

2、底层依赖轻量级Canva+库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

扩展资料

echarts的优点:

1、国人开发,文档全,便于开发和阅读文档。

2、图表丰富,可以适用各种各样的功能。

echarts的缺点:

1、移动端使用略卡,毕竟是PC端的东西,移植到移动端肯定多多少少有些问题吧,或许跟自己水平也有一定的关系。

2、echarts不失为一款比较适合我们这种码农使用的框架。

3、echarts就不贴代码了。毕竟文档很全。

参考资料:

ECharts官网-eCharts

多簇并列的两层以内堆积柱形图 由于EXCEL图表中的堆积柱形图不能并列,制作并列的堆积柱形图不能直接实现,需要借助簇状柱形图的主次坐标轴用次坐标轴图形覆盖主坐标轴图形的办法实现 制作步聚: (1) 分别确定在主次坐标轴上的数据源

Echats本身没有连接数据库的功能

需要使用服务端语言(比如Java)来编写连接数据库的代码

然后前端去调用后台的访问数据库的接口获取到数据

然后再把获取到的数据显示到Echarts上。

以上就是关于在java EE中怎么使用Echarts全部的内容,包括:在java EE中怎么使用Echarts、echarts是做什么的、echarts怎么实现堆积柱状图,数据来源数据库等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/10199923.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-06
下一篇 2023-05-06

发表评论

登录后才能评论

评论列表(0条)

保存