利用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對象封裝的簡單案例。