ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器
（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度
個性化定制的數據可視化圖表。
官網：http://echarts.baidu.com/
目前最新版本：4.2.0-rc.2
1、快速上手一個小例子
（1）官網下載
根據個人需要下載，如開發環境可下載源代碼版本echarts.js，該版本包含了常見的警告和錯誤提示。或者下載完整版本
，包含了所有圖表組件echarts.min.js。另外還有兩個常用、精簡版本。
（2）引入ECharts
只需要引入echarts.js或echarts.min.js一個文件即可，代碼如下：
<script src="echarts.js"></script>
（3）使用 Echarts 繪制一個簡單的圖表
繪制圖表前需要先有一個有寬高的 DOM 容器，代碼如下：
<div id="main" style="width: 600px;height:400px;"></div>
接着使用 echarts.init 方法來初始化一個 echarts 實例，使用 setOption 方法生成一個簡單的折線圖，完整的代碼如
下：
<html>
<head>
<script src="echarts.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '未來一周氣溫變化'
},
tooltip: {},
legend: {},
toolbox: {},
xAxis: [{
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: { },
series: [{
name: '最高氣溫',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10]
},
{
name: '最低氣溫',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
//默認是合並原數據，加上true表示不合並配置，否則原數據依然存在圖表上
//myChart.setOption(option, true);
</script> </body> </html>
2、ECharts一些常用配置項參數說明，見代碼注釋
<html> <head> <script src="echarts.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: '未來一周氣溫變化', //標題 subtext: '純屬虛構' //子標題 }, tooltip: {//提示框，鼠標懸浮交互時的信息提示 trigger: 'axis'//值為axis顯示該列下所有坐標軸對應數據，值為item時只顯示該點數據 }, legend: { //圖例，每個圖表最多僅有一個圖例 data: ['最高氣溫', '最低氣溫'] }, toolbox: {//工具欄 show: true, feature: { mark: { show: true }, dataView: { //數據視圖 show: true, readOnly: false//是否只讀 }, magicType: {//切換圖表 show: true, type: ['line', 'bar', 'stack', 'tiled']//圖表 }, restore: {//還原原始圖表 show: true }, saveAsImage: {//保存圖片 show: true } } }, calculable: true,//是否啟用拖拽重計算特性 xAxis: [{ type: 'category', //坐標軸類型，橫軸默認為類目型'category' boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']//數據項 }], yAxis: [{ type: 'value', //坐標軸類型，縱軸默認為數值型'value' axisLabel: { formatter: '{value} °C' //加上單位 } }], series: [{//設置圖表數據 name: '最高氣溫', //系列名稱，如果啟用legend，該值將被legend.data索引相關 type: 'line',//圖表類型 data: [11, 11, 15, 13, 12, 13, 10], markPoint: { //系列中的數據標注內容 data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }] }, markLine: {//系列中的數據標線內容 data: [{ type: 'average', name: '平均值' }] } }, { name: '最低氣溫', type: 'line', data: [1, -2, 2, 5, 3, 2, 0], markPoint: { data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }] }, markLine: { data: [{ type: 'average', name: '平均值' }] } }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);</script> </body> </html>
2、綁定后台數據
（1）后台方法（Java）模擬生成數據
@RequestMapping("action.getRptChartTest.do")
@ResponseBody
public Model getRptChartTest(HttpServletRequest request, Model model) throws
WebControllerException
{
List<String> propertyName = new ArrayList<String>();
propertyName.add("部門1");
propertyName.add("部門2");
List<String> xAxis = new ArrayList<String>();
//模擬生成x軸的12個月
for(int i = 1; i <= 12; i++){
xAxis.add(i + "月");
}
List<Object> data = new ArrayList<Object>();
Map<String, Object> markPoint = new HashMap<String, Object>();
List<Map<String, Object>> markPointData = new ArrayList<Map<String, Object>>();
Map<String, Object> markPointDataMaxType = new HashMap<String, Object>();
markPointDataMaxType.put("type", "max");
markPointDataMaxType.put("name", "最大值");
markPointData.add(markPointDataMaxType);
Map<String, Object> markPointDataMinType = new HashMap<String, Object>();
markPointDataMinType.put("type", "min");
markPointDataMinType.put("name", "最小值");
markPointData.add(markPointDataMinType);
markPoint.put("data", markPointData);
for(int i=0;i<propertyName.size();i++){
//模擬生成每個部門的數據
List<Integer> k = new ArrayList<Integer>();
for(int j = 1; j <= 12; j++){
int tmp = (int)(1+Math.random()*(10-1+1));
k.add(tmp);
}
//最大值和最小值
Map<String,Object> item = new HashMap<String,Object>();
item.put("name", propertyName.get(i));
item.put("type", "line");
item.put("data", k);
item.put("markPoint", markPoint);
data.add(item);
}
model.addAttribute("propertyName", propertyName);
model.addAttribute("xAxis", xAxis);
model.addAttribute("data", data);
return model;
}
生成的json數據如下所示：
（2）前端關鍵代碼
<script type="text/javascript"> $(function(){ queryRptChart(); $("#btnQuery").click(function(){ queryRptChart(); }); }); function queryRptChart(){ var property; var xAxis; var data; $.ajax({ url : "action.getRptChartTest.do", type: "post", async: false, dataType : "json", data : {}, error : function() { art.dialog.tips("系統出錯"); }, success : function(result) { if (result) { property = result.propertyName; xAxis = result.xAxis; data = result.data; } } }); var myChart = echarts.init(document.getElementById('chartmain')); var option = { title : { text: '合同報表', subtext: '月度數據' }, tooltip : { trigger: 'axis' }, legend: {property }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'category', boundaryGap : false, data : xAxis } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 萬' } } ], series : data }; myChart.setOption(option); } </script>
顯示效果如下：
