近日，工作原因接觸到繪製圖表，粗糙的查詢了下繪製圖表工具，也因此接觸到了echarts，下面簡單的談一下使用時一些體會。
(ps：認識較爲膚淺，大神勿噴)
首先，簡單介紹一下echarts：百度出品，純Javascript圖表庫，基於Canvas，底層依賴ZRender，商業產品通用圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表，支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖（內置世界地圖、中國及全國34個省市自治區地理數據），同時支持任意維度的堆積和多圖表混合展現。剛好迎合了現在的大數據時代。是一款十分好的免費開源插件。
首先談一下初次接觸echarts的感受，第一感覺：大氣，優雅，而且能夠清晰的體現數據的走勢。通過網頁審查元素，瞭解到在網頁解析後通過HTML5中標籤Canvas畫板來進行繪製，毋庸置疑，後臺必然通過JS來控制Canvas來繪製圖表，又查看了一下數據傳輸，使用JSON數據格式配合來進行繪製，好了，初步瞭解到此爲止。下面進行詳細解釋。
首先，要使用echarts，先要從echarts官網下載一下最新的源碼包http://echarts.baidu.com/index.html 文章中設計相關名詞可參見http://echarts.baidu.com/doc/doc.html#簡介
下面開始繪製圖表開始：
首先在網頁中要創建好一個容器，即爲一個具有固定寬高的div即可
接下來要做的就是生成圖表需要使用的文件路徑等
require.config({
paths:{
'echarts':'./ echarsjs/echarts', //echarts.js的路徑
}
});
接下來還要做的一步就是動態加載echarts然後在編寫一個回調函數，最後在回調函數中使用echarts設置 參數，最後就能生成圖表了。
require([
'echarts',
'echarts/chart/line'
],
下面說一下需要設置的各項具體有
title （標題）、tooltip（氣泡提示框）、legend（圖例）、toolbox（輔助工具箱）、calculable（固定是否可計算）、xAxis（X軸）、yAxis（Y軸）、series（數據系列）大體的設置項有這些，其實其中好多東西都是爲了生成的圖表更好看而添加的設置項，所以大家可以按照自己的所需來進行添加，這點我就不多說了，畢竟每個人的審美觀不一樣。
咱們在詳細的說一下各設置項需要注意的東西
title：標題可分爲正標題和副標題
tooltip：氣泡提示框說白了就是鼠標放在對應位置動態出來的一個提示框
legend：圖例，每一項代表一個系列的name，默認佈局到達邊緣會自動分行這裏面需要設置的一項是data，這裏面的data會根據該值索引series中同名系列所用的圖表類型和itemStyle，如果索引不到，該item將默認爲沒啓用狀態
toolbox：這裏面要設置的是顯示策略 和具體的顯示信息
calculable：讓圖表一些值能夠可計算
xAxis：X軸顯示的數據
yAxis：Y軸顯示的數據
series：這就是echarts的核心了，是各項數據的詳細，對應索引的是lengend
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收成表</title>
<script src="./echarsjs/esl.js"></script>
</head>
<body>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script>
require.config({
paths:{
'echarts':'./Public/admin/js/echarsjs/echarts',
'echarts/chart/line' : './Public/admin/js/echarsjs/echarts'
}
});
require([
'echarts',
'echarts/chart/line'
],
function(ex){
var myChart = ex.init(document.getElementById('main'));
myChart.showLoading({
text: '正在努力的讀取數據中...', //loading話術
});
var option = {"title":{
//正標題
"text":"收成對比表",
//副標題
"subtext":"A:15年 B:14年"
},
//氣泡提示框，常用於展現更詳細的數據
"tooltip":{"trigger":"axis"},
//圖例，表述數據和圖形的關聯
"legend":{
//數據 每一項代表一個系列的name，默認佈局到達邊緣會自動分行
"data":[
//使用根據該值索引series中同名系列所用的圖表類型和itemStyle，如果索引不到，該item將默認爲沒啓用狀態。
"A收入",
"A支出",
"B收入",
"B支出"
]
},
//輔助工具箱，輔助功能，如添加標線，框選縮放等
"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":[{
//類目型'category'
"type":"category",
//座標軸兩端空白策略，數組內數值代表百分比
"boundaryGap":false,
//類目列表
"data":[
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
]
}
],
//直角座標系中的縱軸，通常並默認爲數值型
"yAxis":[{
//縱軸默認爲數值型'value'
"type":"value",
//座標軸文本標籤
"axisLabel":{
//間隔名稱格式器
"formatter":"{value} 元"
}
}],
//數據系列，一個圖表可能包含多個系列，每一個系列可能包含多個數據
"series":[{
//系列名稱，如啓用legend，該值將被legend.data索引相關
"name":"A收入",
//圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示。
"type":"line", //折線
//平滑曲線顯示，smooth爲true時lineStyle不支持虛線
"smooth":true,
//系列中的數據內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文本標籤數組axis.data的長度，並且他們間是一一對應的
"data":[
39880,
30228,
16923,
12182,
10328,
9826,
31565,
51428,
61827,
64096,
60613,
60884,
],
//系列中的數據標註內容
"markPoint":{
//標註的數據內容數組，最直接的數據項可直接指定標註相關名稱type : 'max', name: '自定義名字'
"data":[{
"type":"max",
"name":"峯值"
},
{
"type":"min",
"name":"最小值"
}
]
},
//系列中的數據標線內容
"markLine":{
//type : 'max', name: '自定義名字' 平均值水平線或垂直線
"data":[{
"type":"average",
"name":"平均值"
}
]
}
},
{"name":"A支出",
"type":"line",
"smooth":true,
"data":[16407,12533,6954,5018,4268,4281,12818,20538,24768,25547,24692,25331],
"markPoint":{"data":[{"type":"max","name":"支出峯值"},
{"type":"min","name":"支出最小值"}
]
},
"markLine":{"data":[{"type":"average",
"name":"平均值"}
]
}
},
{"name":"B收入",
"type":"line",
"smooth":true,
"data":[14446,10484,6023,4713,3672,5174,11897,19406,20943,22420,22856,22586],
"markPoint":{"data":[{"type":"max",
"name":"收入峯值"},
{"type":"min","name":"\u6700\u5c0f\u503c"}
]
},
"markLine":{"data":[{"type":"average",
"name":"平均值"}
]
}
},
{"name":"B支出","type":"line","smooth":true,
"data":[1283,1002,564,443,340,462,1106,1845,2059,2184,2249,2211],
"markPoint":{"data":[{"type":"max",
"name":"支出峯值"},
{"type":"min","name":"\u6700\u5c0f\u503c"}
]
},
"markLine":{"data":[{"type":"average",
"name":"平均值"}
]
}
}
]
};
myChart.setOption(option);
myChart.hideLoading();
}
);
</script>
</body>
</html>最後呢，我想在說一下，之前網上查了查，完全利用動態數據來生成圖表的貌似很少，我在這裏說一下吧，其實仔細觀察一下每個設置項不難發現，其實很明顯的是json的數據格式，那麼既然是json的數據格式，最先想到的就是利用ajax來進行數據傳遞，畢竟js操作起來json數據還是非常的好的，既然是利用ajax那麼我在後臺就是加工一下數據，說白了，json數據其實可以由php的數組來進行轉換，那麼現在的問題就是轉換成了，我去加工一個數據，然後再轉換成json的格式輸出到前臺，無論是你使用框架中的模板替換還是直接使用ajax來進行加載都是可行的，當然對於ajax個人認爲使用ajax的同步處理較異步處理要好，試想一下當數據量龐大時，異步處理可能造成情況爲前臺就是一個空的圖表，過一會纔會有數據出來，所以個人認爲採用ajax同步處理更爲好
好了，以上就是小弟一些淺顯的認識，歡迎大家來進行交流，謝謝。
