學習echarts的總結
一、圖表的實現
(1)首先將echarts.js引入
為echarts提供一個DOM容器（具有寬高）
為echarts配置參數:
第一步：
初始化DOM容器，用echarts.init()函數
第二步：
配置數據選項var option={ title:{},//圖表的標題 tooltip:{},//應用的組件 legend:{},//圖例組件包括顏色、朝向、位置等 xAxis:[{}],//直角坐標系中x軸需要配置的 yAxis:[{}],//直角坐標系中y軸需要配置的 series:[{}],//系列列表，包括列表類型、顏色、數據等 }第三步：myChart.setOption(option);將數據選項更新 以上步驟就可以基本完成一個簡單的圖表。
實例（柱狀圖表）（南丁格爾圖）
(2)要完成更復雜一些的圖表就需要用一些其他的交互組件功能來實現，echarts內置了 圖例組件 legend、標題組件 title、視覺映射組件 visualMap、數據區域縮放組件 dataZoom、時間線組件 timeline 等
實例（在圖表中加入交互組件）
二、異步數據的加載和更新
（1）一般正常情況圖表的數據多數都是異步加載的，需要從后台獲取數去並異步的加載到頁面。Echarts中實現異步只需要jquery中的工具異步獲取數據后通過setOption填入數據和配置即可。如下：
var mychart=echarts.init(document.getElementById(‘main’));
$.get(‘data.json’).done(function(data){ mychart.setOption({ title:{}, tooltip:{}, legend:{}, xAxis:{}, yAxis:{}, series:[{ data:data }] }) })（2）還可以先設置一個空的坐標軸，然后再異步獲取數據同樣通過setOption載入，如果加載數據時間很長可以在獲取數據的這段時間加上一個loading動畫。只需調用showLoading ()方法就可以實現，數據加載完成后再用hideLoading()方法隱藏 。如下：
myChart.showLoading();
$.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...);});（3）數據的動態更新
所有數據的更新都通過 setOption實現，你只需要定時獲取數據，setOption 填入數據，而不用考慮數據到底產生了那些變化，ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。
一般地，是通過定時器定時獲取數據並更新到頁面
實例（數據的動態更新）
三、移動端的自適應
要實現的方法與CSS中的媒體查詢方法類似，通過設置不同媒體下的的樣式等實現功能。具體語法如下：
option = {
baseOption: { // 這里是基本的『原子option』。
title: {...}, legend: {...}, series: [{...}, {...}, ...], ... }, media: [ // 這里定義了 media query 的逐條規則。 { query: {...}, // 這里寫規則。 option: { // 這里寫此規則滿足下的option。 legend: {...}, ... } }, { query: {...}, // 第二個規則。 option: { // 第二個規則對應的option。 legend: {...}, ... } }, { // 這條里沒有寫規則，表示『默認』， option: { // 即所有規則都不滿足時，采納這個option。 legend: {...}, ... } } ]};實例中需要再引入timelineGDP.js和draggable.js其中timelineGDP.js還不知道作用是什么，到現在一直也都沒有實現，還有待研究。但是實例中移動端的自適應還是正確的
實例（移動端的自適應）
四、數據的視覺映射
（1）概念
數據的可視化就是把數據到視覺元素的映射過程，例如折線圖把數據用線表示，柱狀圖把數據用柱的高度表示諸如此類。
Echarts中的 visualMap 組件就提供數據視覺映射的功能，包括視覺映射中的圖形類別，圖形大小，顏色，透明度，顏色透明度，顏色明暗度，顏色飽和度，色調等。
（2）visualMap組件
visualMap提供了兩種類型的組件，結構如下：
option = {
visualMap: [ // 可以同時定義多個 visualMap 組件。 { // 第一個 visualMap 組件 type: 'continuous', // 定義為連續型 viusalMap ... }, { // 第二個 visualMap 組件 type: 'piecewise', // 定義為分段型 visualMap ... } ], ...};實例（數據可視化）定義的是分段型visualMap
五、事件和行為
Echarts中所涉及的事件包含兩種，一種是鼠標點擊事件，或者hover時觸發的事件；另一種是用戶在使用可交互組件后觸發的行為事件。如實例（在圖表中加入交互組件）中的數據縮放時會觸發datazoom事件。 事件的綁定用on
（1）鼠標事件
所有的鼠標事件都包含參數params，這是一個包含點擊圖形的數據信息的對象。可以在回調函數中獲取這個對象中的函數名、系列名稱等。 如下代碼：
myChart.on('click', function (parmas) { $.get('detail?q=' + params.name, function (detail) { myChart.setOption({ series: [{ name: 'pie', // 通過餅圖表現單個柱子中的數據分布 data: [detail.data] }] }); });});（2）組件交互的行為事件
交互組件都會觸發事件其中的事件種類都在events文檔中有列出。用法一樣用on.
六、API
Echarts中包含的4個類型的API分別為： echarts:{//一個全局對象，引入echarts.js后獲得 init()//初始化實例，注意單個容器不能初始化多個實例 connect()//多個圖表實例實現聯動 disconnect()//解除圖表之間的聯動，如果只需要移除單個實例，可以 將通過將該圖表實例 group 設為空 dispose()//銷毀實例，銷毀后無法再使用 getInstanceByDom()//獲取DOM上的實例 registerMap()//注冊可用的地圖，必須在包括 geo 組件或者 map 圖 表類型的時候才能使用。 getMap()//獲取已注冊的地圖 registerTheme//注冊主題，初始化時使用 }, echartsInstance:{},//通過echarts.init創建的實例可以獲得實例的各種 屬性 action:{},//echarts中支持的圖表的行為包括legend:{},tooltip:{}等 events:{}//echarts中包含的事件