1. 程式人生 > >echarts學習—2(筆記記錄API)

echarts學習—2(筆記記錄API)

1.全域性echarts物件

echarts.init(建立一個echarts例項,返回echartsInstance,不能在單個容器上初始化多個echarts例項);

echarts.connect(多個圖表例項實現聯動);

echarts.disconnect(解除圖表例項的聯動,如果只需要移出單個例項,可以將通過將該圖表例項group設為空);

echarts.dispose(銷燬例項,例項銷燬後無法再被使用);

echarts.getInstanceByDom(獲取dom容器上的例項);

echarts.registerMap(註冊可用的地圖,必須在包括geo元件或者map圖表型別的時候才能使用);

echarts.getMap(獲取已註冊的地圖,返回一個物件);

echarts.registerTheme(註冊主題,用於初始化例項的時候指定);

echarts.graphic(圖形相關幫助方法);

echarts.graphic.clipPointsByRect(輸入一組點,和一個矩形,返回被矩形擷取過的點);

echarts.graphic.clipRectByRect(輸入兩個矩形,返回第二個矩形擷取第一個矩形的結果);

2.echartsInstance(通過echarts.init建立的例項)

echartsInstance.group(圖表的分組,用於聯動);

echartsInstance.setOption(設定圖表例項的配置項以及資料,萬能介面,所有引數和資料的修改都可以通過

setOption完成,ECharts會合並新的引數和資料,然後重新整理圖表。如果開啟動畫的話,ECharts找到兩組資料之間的差異然後通過合適的動畫去表現資料的變化);

echartsInstance.getWidth(獲取ECharts例項容器的寬度 );

echartsInstance.getHeight(獲取ECharts例項容器的高度);

echartsInstance.getDom(獲取ECharts例項容器的dom節點);

echartsInstance.getOption(獲取當前例項中維護的option物件,返回的option物件中包含了使用者多次setOption合併得到的配置項和資料,也記錄了使用者互動的狀態,例如圖例的開關,資料區域的縮放選擇的範圍等等。所以從這份

option可以恢復或者得到一個新的一模一樣的例項);

echartsInstance.resize(改變圖表的尺寸,在容器大小發生改變時需要手動呼叫);

echartsInstance.dispatchAction(觸發圖表行為,例如圖表開關legendToggleSelect,資料區域縮放dataZoom,顯示提示框showTip等等);

echartsInstance.on(繫結事件處理函式);

echartsInstance.off(解綁事件處理函式);

echartsInstance.convertToPixel(轉換座標系上的點到畫素座標值);

echartsInstance.convertFromPixel(轉換畫素座標值到邏輯座標系上的點,是convertToPixel的逆運算);

echartsInstance.showLoading(顯示載入動畫效果,可以在載入資料前手動呼叫改介面顯示載入動畫,在資料載入完成後呼叫hideLoading隱藏載入動畫);

echartsInstance.hideLoading(隱藏動畫載入效果);

echartsInstance.getDataURL(匯出圖表圖片,返回一個base64URL,可以設定為imagesrc);

echartsInstance.getConnectedDataURL(匯出聯動的圖表圖片,返回一個base64URL,可以設定為imagesrc。匯出圖片中每個圖表的相對位置跟容器的相對位置有關);

echartsInstance.clear(清空當前例項,會移除例項中所有的元件和圖表。清空後呼叫getOption方法返回一個空物件{});

echartsInstance.isDisposed(當前例項是否已經被釋放);

echartsInstance.dispose(銷燬例項,銷燬後例項無法再被使用);

3.action ECharts中支援的圖示行為,通過dispatchAction觸發)

highlight(高亮指定的資料圖形,通過seriesName或者seriesIndex指定系列,如果要再指定某個資料可以在指定dataIndex或者name);

downplay(取消高亮指定的資料圖形,通過seriesName或者seriesIndex指定系列,如果要再指定某個資料可以在指定dataIndex或者name);

legend(圖例元件相關的行為,必須引入圖例元件後才能使用);

legendSelect(選中圖例);

legendUnSelect(取消選中圖例);

legendToggleSelect(切換圖例的選中狀態);

tooltip(提示框元件相關的行為,必須引入提示框元件後才能使用);

showTip(顯示提示框);

hideTip(隱藏提示框);

dataZoom(資料區域縮放元件相關的行為,必須引入資料區域縮放元件後才能使用);

selectDataRange(選取對映的資料範圍);

timeline(時間軸元件相關的行為,必須引入時間軸元件後才能使用);

timelineChange(設定當前的時間點);

timelinePlayChange(切換時間軸的播放狀態);

toolbox(工具欄元件相關的行為,必須引入工具欄元件後才能使用);

restore(重置option);

pie(餅圖相關的行為,必須引入餅圖後才能使用);

pieSelect(選中指定的餅圖扇形);

pieUnSelect(取消選中指定的餅圖扇形);

pieToggleSelect(切換指定的餅圖扇形選中狀態);

geo(地圖元件相關的行為,必須引入地圖元件後才能使用);

geoSelect(選中指定的地圖區域);

geoUnSelect(取消選中指定的地圖區域);

geoToggleSelect(切換指定的地圖區域選中狀態);

map(地圖圖表相關的行為,必須引入地圖圖表後才能使用);

mapSelect(選中指定的地圖區域);

mapUnSelect(取消選中指定的地圖區域);

mapToggleSelect(切換指定的地圖區域選中狀態);

graph(關係圖相關的行為,必須引入關係圖後才能使用);

focusNodeAdjacency(將指定的節點以及其所有鄰接節點高亮);

unfocusNodeAdjacency(將指定的節點以及其所有鄰接節點高亮);

brush(觸發此action可向echarts中新增一個或多個選框);

4.events(在ECharts中主要通過on方法新增事件處理函式);

滑鼠事件(滑鼠事件的事件引數是事件物件的資料的各個屬性);

click(點選事件);

mousedown(滑鼠按下);

mouseup(滑鼠放下);

mouseover(滑鼠懸停);

mouseout(滑鼠移出);

globalout(?);

legendselectchanged(切換圖例選中狀態後的事件);

legendselected(圖例選中後的事件);

legendunselected(圖例取消選中後的事件);

datazoom(資料區域縮放後的事件);

datarangeselected(視覺對映元件中,range值改變後觸發的事件);

timelinechanged(時間軸中的時間點改變後的事件);

timelineplaychanged(時間軸中播放狀態的切換事件);

restore(重置option事件);

dataviewchanged(工具欄中資料檢視的修改事件);

magictypechanged(工具欄中動態型別切換的切換事件);

geoselectchangedgeo中地圖區域切換選中狀態的事件);

geoselectedgeo中地圖區域選中後的事件);

geounselectedgeo中地圖區域取消選中後的事件);

pieselectchangedserie-pie餅圖扇形切換選中狀態的事件);

pieselectedseries-pie餅圖扇形選中後的事件);

pieunselectedseries-pie餅圖扇形取消選中後的事件);

mapselectchangedseries-map地圖中區域切換選中狀態的事件);

mapselectedseries-map中地圖區域選中後的事件);

mapunselectedseries-map中地圖區域取消選中後的事件);

axisareaselected(平行座標軸範圍選取事件);

focusNodeAdjacencygraph的鄰接節點高亮事件);

unfocusNodeAdjacencygraph的鄰接節點取消高亮事件);

brush(選框新增事件。即發出brush action得到的事件);

brushselected(對外通知當前選中了什麼);