WEchartsVue

echarts繪圖組件, 已內含echarts全量圖表與組件, 以及echarts-gl之3D圖表(bar3D, line3D, scatter3D, surface等), 不須自cdn額外引用

注意: 組件本身不帶預設高度, 須由外部給予寬高(例如style="width:620px; height:300px;"), 否則因高度為0而看不見圖形

Props

Name Type Default value Required? Description
options Object {} No 輸入echarts設定物件,即echarts之option,預設{}。變更時自動重繪:給予新物件(參照改變)採整體置換(notMerge),原物件內變更(mutation)採合併更新,與vue-echarts語意一致
theme String|Object '' No 輸入echarts主題字串或主題設定物件,字串為已使用echarts.registerTheme註冊之主題名稱,變更時會自動銷毀重建圖表,預設''
initOptions Object {} No 輸入echarts初始化設定物件,即echarts.init之opts,可設定renderer('canvas'或'svg')、locale、devicePixelRatio等,變更時會自動銷毀重建圖表,預設{}
updateOptions Object {} No 輸入echarts更新設定物件,即echarts之setOption之opts,可設定notMerge、replaceMerge、lazyUpdate等,預設{}
group String '' No 輸入圖表群組名稱字串,供echarts.connect跨圖表連動使用,預設''
manualUpdate Boolean false No 輸入是否關閉options之深度監聽布林值,若為true則變更options不會自動重繪,須自行取得實例呼叫setOption更新,適用於資料量龐大時,預設false
loading Boolean false No 輸入是否顯示讀取中動畫布林值,預設false
loadingOptions Object {} No 輸入讀取中動畫設定物件,即echarts之showLoading之opts,可設定text、color、maskColor等,預設{}
autoresize Boolean|Object true No 輸入是否於容器尺寸改變時自動重繪布林值,亦可給物件設定{throttle,onResize},throttle為節流毫秒數預設100,預設true

Events

Name Payload Type Description
* Object 對外轉發echarts之全部事件,例如click、mouseover、legendselectchanged、datazoom、finished等,回傳事件參數物件;zrender事件以zr:前綴綁定,例如@zr:click

Description:
  • echarts繪圖組件, 已內含echarts全量圖表與組件, 以及echarts-gl之3D圖表(bar3D, line3D, scatter3D, surface等), 不須自cdn額外引用

    注意: 組件本身不帶預設高度, 須由外部給予寬高(例如style="width:620px; height:300px;"), 否則因高度為0而看不見圖形

Props

Name Type Default value Required? Description
options Object {} No 輸入echarts設定物件,即echarts之option,預設{}。變更時自動重繪:給予新物件(參照改變)採整體置換(notMerge),原物件內變更(mutation)採合併更新,與vue-echarts語意一致
theme String|Object '' No 輸入echarts主題字串或主題設定物件,字串為已使用echarts.registerTheme註冊之主題名稱,變更時會自動銷毀重建圖表,預設''
initOptions Object {} No 輸入echarts初始化設定物件,即echarts.init之opts,可設定renderer('canvas'或'svg')、locale、devicePixelRatio等,變更時會自動銷毀重建圖表,預設{}
updateOptions Object {} No 輸入echarts更新設定物件,即echarts之setOption之opts,可設定notMerge、replaceMerge、lazyUpdate等,預設{}
group String '' No 輸入圖表群組名稱字串,供echarts.connect跨圖表連動使用,預設''
manualUpdate Boolean false No 輸入是否關閉options之深度監聽布林值,若為true則變更options不會自動重繪,須自行取得實例呼叫setOption更新,適用於資料量龐大時,預設false
loading Boolean false No 輸入是否顯示讀取中動畫布林值,預設false
loadingOptions Object {} No 輸入讀取中動畫設定物件,即echarts之showLoading之opts,可設定text、color、maskColor等,預設{}
autoresize Boolean|Object true No 輸入是否於容器尺寸改變時自動重繪布林值,亦可給物件設定{throttle,onResize},throttle為節流毫秒數預設100,預設true

Events

Name Payload Type Description
* Object 對外轉發echarts之全部事件,例如click、mouseover、legendselectchanged、datazoom、finished等,回傳事件參數物件;zrender事件以zr:前綴綁定,例如@zr:click

Methods

bindResize()

Description:
  • 綁定容器尺寸監聽, 尺寸改變時自動重繪(內部使用)

Source:

clear()

Description:
  • 銷毀圖表與監聽(內部使用)

Source:

clearResize()

Description:
  • 解除容器尺寸監聽(內部使用)

Source:

getChart() → {Object|null}

Description:
  • 取得內部echarts實例, 供外部呼叫echarts原生方法(setOption, resize, getDataURL, dispatchAction等)之用 因echarts實例於組件掛載後才建立, 故初始化前呼叫會回傳null

Source:
Returns:

回傳echarts實例物件, 若尚未初始化則回傳null

Type
Object | null

init()

Description:
  • 初始化圖表, 建立echarts實例並綁定事件, 讀取中動畫與尺寸監聽(內部使用)

Source:

reinit()

Description:
  • 銷毀並重建圖表, 供theme或initOptions變更時使用(內部使用)

Source:

updateLoading()

Description:
  • 更新讀取中動畫(內部使用)

Source: