Global

Methods

getContainerSize(el) → {Object}

Description:

• 取得echarts容器可用尺寸，量測方式與echarts(zrender)相同，即clientWidth/clientHeight扣除padding(parseInt)，見zrender/lib/canvas/helper.js之getSize， 供v-domresize之getSize與圖表getWidth()、getHeight()比較，容器寬高為小數時(例如百分比寬度)亦不誤判

Source:

• js/getContainerSize.mjs, line 14

Example

//容器clientWidth為1000、padding左右各20.7px
console.log(getContainerSize(el))
// => { width: 960, height: 300 }

Parameters:

Returns:

Type

Object

iniEcharts() → {Object}

Description:

• 初始化echarts, 直接引用echarts與echarts-gl不使用cdn

  echarts採全量引入(import 'echarts'), 已自動註冊全部內建圖表(line, bar, pie, scatter, radar, heatmap, tree, treemap, sunburst, parallel, custom等) 與全部內建組件(title, legend, tooltip, toolbox, dataZoom, visualMap, grid, polar, geo等), 故使用時不須另外呼叫echarts.use註冊

  echarts-gl為3D擴充模組, 匯入時即自行向echarts註冊bar3D, line3D, scatter3D, surface, lines3D等圖表, 以及grid3D, geo3D, globe等座標系, 其package.json已正確宣告sideEffects白名單(index.js與lib/export/all.js等), 故純副作用引入不會被tree-shaking移除

  注意: echarts-gl之esm原始碼含無副檔名之深層引用(如'zrender/lib/core/LRU', 'echarts/lib/util/layout'), 而echarts與zrender之package.json exports末端為萬用對應"./": "./", 依Node規範解析結果不補副檔名, 故打包工具須具備[深層子路徑補.js重試]之解析能力(webpack內建此行為; rollup需由w-package-tools之rollupFile提供)

Source:

• js/iniEcharts.mjs, line 27

Example

import iniEcharts from 'w-echarts-vue/src/js/iniEcharts.mjs'

let echarts = iniEcharts()
echarts.registerTheme('myTheme', { ... })

Returns:

Type

Object

isPropUnchanged(nv, ov) → {Boolean}

Description:

• 判斷prop新舊值是否視為未變更，供watcher略過無實質變化之觸發

  父組件於模板以物件字面值傳入prop時(例如:theme="{ color: [...] }")，每次重繪皆產生新物件(參照不同)，故內容相同時視為未變更； 新舊值為同一物件時，代表由deep watcher偵測到物件內部異動，視為已變更

Source:

• js/isPropUnchanged.mjs, line 27

Example

console.log(isPropUnchanged({ renderer: 'svg' }, { renderer: 'svg' }))
// => true

let o = { renderer: 'svg' }
console.log(isPropUnchanged(o, o))
// => false

console.log(isPropUnchanged('dark', ''))
// => false

Parameters:

Returns:

Type

Boolean

parseAutoresize(autoresize) → {Object}

Description:

• 解析組件之autoresize設定

Source:

• js/parseAutoresize.mjs, line 22

Example

console.log(parseAutoresize(true))
// => { enabled: true, throttle: 100, onResize: null }

console.log(parseAutoresize({ throttle: 50 }))
// => { enabled: true, throttle: 50, onResize: null }

console.log(parseAutoresize(false))
// => { enabled: false, throttle: 100, onResize: null }

Parameters:

Returns:

Type

Object