echarts自學筆記

學習echarts的總結

1、圖表的實現

(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 等
實例（在圖表中加入交互組件）

2、異步數據的加載和更新

（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 會找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化。
通常地，是經過定時器定時獲取數據並更新到頁面
實例（數據的動態更新）

3、移動端的自適應

要實現的方法與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還不知道做用是什麼，到如今一直也都沒有實現，還有待研究。可是實例中移動端的自適應仍是正確的
實例（移動端的自適應）

4、數據的視覺映射

（1）概念

數據的可視化就是把數據到視覺元素的映射過程，例如折線圖把數據用線表示，柱狀圖把數據用柱的高度表示諸如此類。
Echarts中的 visualMap 組件就提供數據視覺映射的功能，包括視覺映射中的圖形類別，圖形大小，顏色，透明度，顏色透明度，顏色明暗度，顏色飽和度，色調等。

（2）visualMap組件

visualMap提供了兩種類型的組件，結構以下：

option = {
    visualMap: [ // 能夠同時定義多個 visualMap 組件。 { // 第一個 visualMap 組件 type: 'continuous', // 定義爲連續型 viusalMap ... }, { // 第二個 visualMap 組件 type: 'piecewise', // 定義爲分段型 visualMap ... } ], ...};

實例（數據可視化）定義的是分段型visualMap

5、事件和行爲

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.

6、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中包含的事件