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為節流毫秒數(取整,0為不節流)預設100,onResize為圖表依新尺寸重繪後之通知函數(呼叫時已完成繪製,可直接讀取新版面),容器尺寸與圖表一致或容器隱藏(寬或高為0)時不重繪亦不通知,僅啟用狀態或throttle改變時才重新綁定監聽,預設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為節流毫秒數(取整,0為不節流)預設100,onResize為圖表依新尺寸重繪後之通知函數(呼叫時已完成繪製,可直接讀取新版面),容器尺寸與圖表一致或容器隱藏(寬或高為0)時不重繪亦不通知,僅啟用狀態或throttle改變時才重新綁定監聽,預設true

Events

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

Methods

clear()

Description:
  • 銷毀圖表(內部使用), 容器尺寸監聽由v-domresize隨組件解除

Source:

genResizeOpt()

Description:
  • 產生v-domresize之設定, autoresize停用時為false(不建立偵測器)(內部使用)

    以w-component-vue之v-domresize(wsemi domDetect: ResizeObserver, 並處理元素消失與重建, 不支援時退回輪詢)監聽容器尺寸: event為'resize'只聽容器尺寸, 視窗改變而容器不變時不重繪; sync於ResizeObserver回呼內(繪製前)發出使圖表於同一幀重繪; tolerancePixel為0使1px之變化亦發出; getSize以與echarts相同之方式量測容器(clientWidth扣除padding), 故只改padding而外框不變者亦重繪; getBase為圖表目前尺寸, 故尺寸一致時(含掛載時與由隱藏轉顯示時)不重繪而不中斷進場動畫, 且與回報次序無關, 同一幀內之尺寸變化(圖剛建立、父組件重繪、捲軸出現)不會遺漏

Source:

getChart() → {Object|null}

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

Source:
Returns:

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

Type
Object | null

getChartSize()

Description:
  • 取得圖表目前尺寸, 供v-domresize比較, initOptions指定寬高(非'auto')之維度不隨容器變化故回傳null(不比較), 尚無圖表時回傳null(內部使用)

Source:

init()

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

Source:

onDomResize()

Description:
  • 容器尺寸與圖表不一致時(由v-domresize判定)重繪(內部使用)

Source:

reinit()

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

Source:

updateLoading()

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

Source: