利用Echarts来制作图表

在项目中先导入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);

js代码一般是放在ajax返回代码里面，看项目需要吧。以上就是一个简单的Echarts通过option对象封装的简单案例。