標籤：開源 html5 javascript 資料視覺效果
ECharts：
來自百度商業前端資料視覺效果團隊,基於html5 Canvas,純Javascript圖表庫，底層依賴ZRender，商業產品常用圖表庫，提供直觀，生動，可互動，可個人化定製的資料視覺效果圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。圖表類型支援折線圖（地區圖）、柱狀圖（條狀圖）、散佈圖（泡泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖，同時支援任意維度堆積和多圖表混合展現。
連結是：http://echarts.baidu.com/
參考在其他資訊：
http://www.highcharts.com/
http://echarts.baidu.com/doc/example.html#line
http://echarts.baidu.com/doc/doc.html
http://www.oschina.net/question/tag/echarts?show=hot
echarts使用步驟 http://www.oschina.net/question/1179358_127869
https://github.com/ecomfe/zrender
http://www.oschina.net/question/947559_144622
結構圖如下：
圖【1】
核心庫：zrender 是一個輕量級的Canvas類庫,MVC封裝,資料驅動,提供類Dom事件模型,讓canvas繪圖大不同。
組件：好的項目必須將各個功能模組單獨開發最後整合，這樣升級、找問題會很高效，以上組件中多數是常用表徵圖的功能組成必備模組。
圖類：將核心底層的組件進行物件導向封裝，成為真正的產品。
介面：為了方便調用，ECharts採用特別簡單的json配置，載入直接成像。
該產品功能非常多，我僅僅將使用到的比較常用和特殊需要的地方分享一下，需要更多功能可以去這裡查閱。
首先下載它的代碼：
圖【2】
解壓后里邊的結構是：
圖【3】
直接看說明檔案：doc
圖【4】
其中，doc.html是官網上的Api&Doc ， Example.html是官網的Example:
圖【5】
雙擊example.html後：
圖【6】
這裡邊每一個小例子都在example檔案夾中，進入example檔案夾看到的內容:
圖【7】
回到雙擊example.html的頁面，找個比較常用的快速入門吧：
圖【8】
點擊進入：
圖【9】
左邊是最上邊結構圖中給最外層介面調用的配置json檔案，使用非常方便，暫時先簡單描述一下使用的方法：
總的來說：我們提供一份配置資料，然後調用ECharts的相關介面，自動畫圖成像。
具體來說：
1：環境配置
最精簡的僅僅需要這4個檔案：
我理解中:]
echarts是組件，zrender已經被包含在裡邊了，所以不需要自己增加了;
echarts-map將圖類與組件map（映射、關聯）在一起;
Esl是載入器，將配置資料與映像介面載入在一起成像
JS檔案在下載的源碼中隨處可見，而index.html裡邊調用這三個js，以及資料的添加、介面的調用，將3個js放在一個檔案夾中歸類。
Html中很的源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/esl.js"></script> <!-- 注釋：esl.js裡邊調用另外兩個js 相關內容-->
</head>
<body>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--注釋：最後映像會畫在這個div裡邊-->
<script type="text/javascript">
require.config({
paths:{
echarts:‘./js/echarts‘,
‘echarts/chart/bar‘ : ‘./js/echarts-map‘,<!--注釋：表示該映像需要柱狀圖-->
‘echarts/chart/line‘: ‘./js/echarts-map‘<!--注釋：表示該映像需要曲線圖-->
}
});
require(
[
‘echarts‘,
‘echarts/chart/bar‘,
‘echarts/chart/line‘
],
function(ec) {
var myChart = ec.init(document.getElementById(‘main‘));
<!--注釋：使用前必須調用這個初始化介面，將內容畫在main那個div中-->
myChart.setOption({
tooltip : {
trigger: ‘axis‘
},
legend: {
data:[‘蒸發量‘,‘降水量‘]
},
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 : ‘category‘,
data : [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘]
}
],
yAxis : [
{
type : ‘value‘,
splitArea : {show : true}
}
],
series : [
{
name:‘蒸發量‘,
type:‘bar‘,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:‘降水量‘,
type:‘bar‘,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
}
);
</script>
</body>
</html>
上邊的代碼的效果：
圖【10】
可以做到的比較特殊的效果展現一下：
圖【11】
自訂X、Y座標內容；
自訂需要哪些顯示的曲線，比如曲線、柱狀線等；
圖【12】
可以將兩條曲線的感興趣的對比資訊添加到上邊顯示。
圖【13】
每一個點都可以進行各種特殊化處理：
形狀（空心圓、星星等）
滑鼠停在上邊顯示內容（可以全部不一樣，完全自訂，很方便）
圖【14】
顯示座標軸資訊。
設定檔可以做的實在太多，暫不一一描述，感興趣的可以看相關的協助文檔瞭解學習。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
