學(xué)習(xí)echarts的總結(jié)

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

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

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

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

實(shí)例（柱狀圖表）（南丁格爾圖）

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

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

（1）一般正常情況圖表的數(shù)據(jù)多數(shù)都是異步加載的，需要從后臺(tái)獲取數(shù)去并異步的加載到頁面。Echarts中實(shí)現(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è)置一個(gè)空的坐標(biāo)軸，然后再異步獲取數(shù)據(jù)同樣通過setOption載入，如果加載數(shù)據(jù)時(shí)間很長可以在獲取數(shù)據(jù)的這段時(shí)間加上一個(gè)loading動(dòng)畫。只需調(diào)用showLoading ()方法就可以實(shí)現(xiàn)，數(shù)據(jù)加載完成后再用hideLoading()方法隱藏 。如下：

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

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

三、移動(dòng)端的自適應(yīng)

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

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

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

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

（1）概念

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

（2）visualMap組件

visualMap提供了兩種類型的組件，結(jié)構(gòu)如下：

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

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

五、事件和行為

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

（1）鼠標(biāo)事件

所有的鼠標(biāo)事件都包含參數(shù)params，這是一個(gè)包含點(diǎn)擊圖形的數(shù)據(jù)信息的對象。可以在回調(diào)函數(shù)中獲取這個(gè)對象中的函數(shù)名、系列名稱等。 如下代碼：

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

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

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

六、API

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

轉(zhuǎn)載于:https://www.cnblogs.com/liuyangdiv/p/6425797.html

總結(jié)

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

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