學習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中包含的事件

轉載于:https://www.cnblogs.com/liuyangdiv/p/6425797.html

總結

以上是生活随笔為你收集整理的echarts自学笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。