在java EE中怎么使用Echarts
发布网友
发布时间：2022-04-28 21:10
共1个回答
热心网友
时间：2022-04-20 01:34
public Option selectRemoveCauses() throws BusinessException {
//查询前20
PageHelper.startPage(1, 20, false);
//数据库查询获取统计数据
List<Map<String, Object>> list = kc22Mapper.selectRemoveCauses();
//为了数据从大到小排列，这里需要倒叙
Collections.sort(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();
option.title("剔除药品").tooltip(Trigger.axis).legend("金额（元）");
//横轴为值轴
option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
//创建类目轴
CategoryAxis category = new CategoryAxis();
//柱状数据
Bar bar = new Bar("金额（元）");
//饼图数据
Pie pie = new Pie("金额（元）");
//循环数据
for (Map<String, Object> objectMap : list) {
//设置类目
category.data(objectMap.get("NAME"));
//类目对应的柱状图
bar.data(objectMap.get("TOTAL"));
//饼图数据
pie.data(new PieData(objectMap.get("NAME").toString(), objectMap.get("TOTAL")));
}
//设置类目轴
option.yAxis(category);
//饼图的圆心和半径
pie.center(900,380).radius(100);
//设置数据
option.series(bar, pie);
//由于药品名字过长，图表距离左侧距离设置180，关于grid可以看ECharts的官方文档
option.grid().x(180);
//返回Option
return option;
}
代码中的注释很详细。
Service返回Option后，在Controller层返回，Controller层代码如下：
[java] view plain copy 在CODE上查看代码片派生到我的代码片
@RequestMapping(" www.hbbz08.com /removecauses")
public
@ResponseBody
WebResult removecauses() throws Exception {
WebResult result = new WebResult();
try {
Option option = injuryService.selectRemoveCauses();
result.isOK();
result.setData(option);
} catch (BusinessException e) {
result.setException(e);
}
return result;
}
SpringMVC配置的返回JSON，这里的WebResult不用多考虑，就是一层统一的封装，和ECharts图表无关。
然后是前台页面，使用jQuery的getJSON方法获取数据，完整的页面代码如下：
[html] view plain copy 在CODE上查看代码片派生到我的代码片
<body style="padding:0">
<div style="padding:10px;clear: both;">
<div id="psLine" style="height:600px;"></div>
</div>
</body>
<script src="jslib/echarts/echarts-all.js"></script>
<script type="text/javascript">
//图表
var psLineChar = echarts.init(document.getElementById('psLine'));
//查询
function loadDrugs() {
psLineChar.clear();
psLineChar.showLoading({text: '正在努力的读取数据中...'});
$.getJSON('analysis/removecauses.html', function (data) {
if (data.success) {
psLineChar.setOption(data.data, true);
psLineChar.hideLoading();
} else {
alert('提示', data.msg);
}
});
}
//载入图表
loadDrugs();
转
