在项目中先导入Echarts-2.2.0jar包,下载地址:http://download.csdn.net/detail/shui__xin/8430625
先生成一个Option的类,然后设置该类的参数,以及将查询结果集注入到option的类中,如以下代码:
//产品流水柱状图的echarts,参数<span style="font-family: Arial, Helvetica, sans-serif;">appHzList为数据集</span>
private Option appForEcharts(List<RechargeHz> appHzList){
Option option = new Option();
option.title("产品流水柱状图").tooltip(Trigger.axis).legend("金额(元)"); //设置表格title参数,以及单位
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore); option.calculable(true); CategoryAxis categoryX = new CategoryAxis(); Bar bar = new Bar("金额(元)");//设置柱状图显示,具体的参数含义可以查看Echarts源码,这里就不一一解释
//RechargeHz为数据集封装类
for(RechargeHz rechargeHz:appHzList){
categoryX.data(rechargeHz.getAppName());//为横坐标注入数据
bar.data(rechargeHz.getHzPrice());//为纵坐标注入数据
}
option.xAxis(categoryX);
ValueAxis valueAxis = new ValueAxis();
option.yAxis(valueAxis);
option.series(bar);
return option;
}
然后前端接收 Option对象,jsp/html如下代码:
<div id="appReport" style="width:500px;height:300px;float:left;margin:0 50px 0 0"></div>
js代码:
var appChart = echarts.init(document.getElementById('appReport'));
appChart.setOption(option);