學習echarts的總結

一、圖表的實現(xiàn)

(1)首先將echarts.js引入
為echarts提供一個DOM容器（具有寬高）
為echarts配置參數(shù):
第一步：
初始化DOM容器，用echarts.init()函數(shù)
第二步：

配置數(shù)據(jù)選項var option={ title:{},//圖表的標題tooltip:{},//應用的組件legend:{},//圖例組件包括顏色、朝向、位置等 xAxis:[{}],//直角坐標系中x軸需要配置的 yAxis:[{}],//直角坐標系中y軸需要配置的 series:[{}],//系列列表，包括列表類型、顏色、數(shù)據(jù)等 }

第三步：myChart.setOption(option);將數(shù)據(jù)選項更新 以上步驟就可以基本完成一個簡單的圖表。

實例（柱狀圖表）（南丁格爾圖）

(2)要完成更復雜一些的圖表就需要用一些其他的交互組件功能來實現(xiàn)，echarts內置了 圖例組件?legend、標題組件?title、視覺映射組件?visualMap、數(shù)據(jù)區(qū)域縮放組件?dataZoom、時間線組件?timeline 等
實例（在圖表中加入交互組件）

二、異步數(shù)據(jù)的加載和更新

（1）一般正常情況圖表的數(shù)據(jù)多數(shù)都是異步加載的，需要從后臺獲取數(shù)去并異步的加載到頁面。Echarts中實現(xiàn)異步只需要jquery中的工具異步獲取數(shù)據(jù)后通過setOption填入數(shù)據(jù)和配置即可。如下：

var mychart=echarts.init(document.getElementById(‘main’)); $.get(‘data.json’).done(function(data){ mychart.setOption({ title:{}, tooltip:{}, legend:{}, xAxis:{}, yAxis:{}, series:[{ data:data }] }) })

（2）還可以先設置一個空的坐標軸，然后再異步獲取數(shù)據(jù)同樣通過setOption載入，如果加載數(shù)據(jù)時間很長可以在獲取數(shù)據(jù)的這段時間加上一個loading動畫。只需調用showLoading ()方法就可以實現(xiàn)，數(shù)據(jù)加載完成后再用hideLoading()方法隱藏 。如下：

myChart.showLoading();$.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...);});

（3）數(shù)據(jù)的動態(tài)更新
所有數(shù)據(jù)的更新都通過?setOption實現(xiàn)，你只需要定時獲取數(shù)據(jù)，setOption?填入數(shù)據(jù)，而不用考慮數(shù)據(jù)到底產生了那些變化，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。
一般地，是通過定時器定時獲取數(shù)據(jù)并更新到頁面
實例（數(shù)據(jù)的動態(tài)更新）

三、移動端的自適應

要實現(xiàn)的方法與CSS中的媒體查詢方法類似，通過設置不同媒體下的的樣式等實現(xiàn)功能。具體語法如下：

option = {baseOption: { // 這里是基本的『原子option』。title: {...},legend: {...},series: [{...}, {...}, ...],...},media: [ // 這里定義了 media query 的逐條規(guī)則。{query: {...}, // 這里寫規(guī)則。 option: { // 這里寫此規(guī)則滿足下的option。 legend: {...}, ... } }, { query: {...}, // 第二個規(guī)則。 option: { // 第二個規(guī)則對應的option。 legend: {...}, ... } }, { // 這條里沒有寫規(guī)則，表示『默認』， option: { // 即所有規(guī)則都不滿足時，采納這個option。 legend: {...}, ... } } ]};

實例中需要再引入timelineGDP.js和draggable.js其中timelineGDP.js還不知道作用是什么，到現(xiàn)在一直也都沒有實現(xiàn)，還有待研究。但是實例中移動端的自適應還是正確的
實例（移動端的自適應）

四、數(shù)據(jù)的視覺映射

（1）概念

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

（2）visualMap組件

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

option = {visualMap: [ // 可以同時定義多個 visualMap 組件。{ // 第一個 visualMap 組件type: 'continuous', // 定義為連續(xù)型 viusalMap ... }, { // 第二個 visualMap 組件 type: 'piecewise', // 定義為分段型 visualMap ... } ], ...};

實例（數(shù)據(jù)可視化）定義的是分段型visualMap

五、事件和行為

Echarts中所涉及的事件包含兩種，一種是鼠標點擊事件，或者hover時觸發(fā)的事件；另一種是用戶在使用可交互組件后觸發(fā)的行為事件。如實例（在圖表中加入交互組件）中的數(shù)據(jù)縮放時會觸發(fā)datazoom事件。 事件的綁定用on

（1）鼠標事件

所有的鼠標事件都包含參數(shù)params，這是一個包含點擊圖形的數(shù)據(jù)信息的對象?？梢栽诨卣{函數(shù)中獲取這個對象中的函數(shù)名、系列名稱等。 如下代碼：

myChart.on('click', function (parmas) {$.get('detail?q=' + params.name, function (detail) { myChart.setOption({ series: [{ name: 'pie', // 通過餅圖表現(xiàn)單個柱子中的數(shù)據(jù)分布 data: [detail.data] }] }); });});

（2）組件交互的行為事件

交互組件都會觸發(fā)事件其中的事件種類都在events文檔中有列出。用法一樣用on.

六、API

Echarts中包含的4個類型的API分別為： echarts:{//一個全局對象，引入echarts.js后獲得 init()//初始化實例，注意單個容器不能初始化多個實例 connect()//多個圖表實例實現(xiàn)聯(lián)動 disconnect()//解除圖表之間的聯(lián)動，如果只需要移除單個實例，可以 將通過將該圖表實例?group?設為空 dispose()//銷毀實例，銷毀后無法再使用 getInstanceByDom()//獲取DOM上的實例 registerMap()//注冊可用的地圖，必須在包括?geo?組件或者?map?圖 表類型的時候才能使用。 getMap()//獲取已注冊的地圖 registerTheme//注冊主題，初始化時使用 }, echartsInstance:{},//通過echarts.init創(chuàng)建的實例可以獲得實例的各種 屬性 action:{},//echarts中支持的圖表的行為包括legend:{},tooltip:{}等 events:{}//echarts中包含的事件

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

總結

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

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