ECharts，縮寫來自Enterprise Charts，商業級數據圖表，來自百度的一款開源、功能強大的數據可視化產品，從官網的example中可以看到能夠實現目前見到的各種圖形報表，並且帶有詳細的代碼和圖形demo：http://echarts.baidu.com/doc/example.html
不過我們通常不會像demo中那樣綁定死數據，我們通常需要從數據庫中獲取數據，再展示出來，我們先看綁定靜態數據的demo，通過代碼分析如何綁定動態數據。綁定靜態數據（官網）
以條形圖爲例：
JS綁定數據
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: '平臺交易額',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['2015年']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','總']
}
],
series : [
{
name:'2015年',
type:'bar',
data:[48203, 53489, 119034, 184970, 231744, 630230]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script> 其中最關係的就是其中的option如何動態加載數據。其實無非就是拼串，我們既可以在前臺去拼也可以在後臺拼接成json串返回頁面。如果整個項目只需要一種圖表，我們拼一拼也無所謂，但是要應對以後的圖形變化，或者新增圖形，每種圖形都拼一遍肯定是麻煩，也不符合面向對象的特點，既然如此，我們就需要把option變成對象去管理。
個人對Echarts其中各個圖表的option不是很熟，而網上也已經有了很成熟的類庫，簡單學習即可，源碼：
http://git.oschina.net/free/ECharts/tree/master/src/main/java/com/github/abel533/echarts/
下面以springmvc框架來再次實現動態數據加載
controller
@RequestMapping("/example")
public class example{
@ResponseBody
public WebResult getOption() throws Exception {
WebResult result = new WebResult();
try {
Option option = injuryService.selectRemoveCauses();
result.isOK();
result.setData(option);
} catch (BusinessException e) {
result.setException(e);
}
return result;
} Service邏輯處理
Public class exampleService{
@Override
public Option getOption() throws BusinessException {
//查詢前20
PageHelper.startPage(1, 20, false);
//數據庫查詢獲取統計數據
List<Map<String, Object>> list = exampleDao.getOption();
//爲了數據從大到小排列，這裏需要倒敘
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("2015年");
//橫軸爲值軸
option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
//創建類目軸
CategoryAxis category = new CategoryAxis();
//柱狀數據
Bar bar = new Bar("2015年");
//循環數據
for (Map<String, Object> objectMap : list) {
//設置類目
category.data(objectMap.get("NAME"));
//類目對應的柱狀圖
bar.data(objectMap.get("TOTAL"));
}
//設置類目軸
option.yAxis(category);
//設置數據
option.series(bar);
//返回Option
return option;
}
}Dao數據訪問
代碼略，從數據庫獲取需要的數據即可
Jsp頁面
<body style="padding:0">
<div style="padding:10px;clear: both;">
<div id="example" style="height:600px;"></div>
</div>
</body>
<script src="echarts/echarts-all.js"></script>
<script type="text/javascript">
//圖表
var exampleChar = echarts.init(document.getElementById('example'));
//查詢
function loadDrugs() {
psLineChar.clear();
psLineChar.showLoading({text: '正在努力的讀取數據中...'});
$.getJSON('example.htm', function (data) {
if (data.success) {
exampleChar.setOption(data.data, true);
exampleChar.hideLoading();
} else {
alert('提示', data.msg);
}
});
}
//載入圖表
loadDrugs();
</script> 不敢哪種圖表，其中變化的就是option的參數，學會了一種，其他的也就很容易實現。
Echarts是一個開源的圖形報表，Echarts-java類庫也是一個開源的類庫，開源使他們發展的很快，也更有益於我們的應用和開發。