ECharts工具欄組件（toolbox）

toolbox

在 ECharts 圖表的工具欄（toolbox）中，有五個內(nèi)置的工具，分別是：導(dǎo)出圖片，數(shù)據(jù)視圖，動態(tài)類型切換，數(shù)據(jù)區(qū)域縮放以及配置項還原，這五個工具的配置在 feature 屬性中實現(xiàn)配置。本節(jié)在介紹 toolbox 的基本屬性時先不講解 feature 而是將其在下一節(jié)中獨(dú)立介紹。

如下示例：

點(diǎn)擊編輯實例 》》

toolbox.show   |   boolean

[ default: true ]

是否顯示工具欄組件。

toolbox.orient   |   string

[ default: 'horizontal' ]

工具欄 icon 的布局朝向。

可選：

• 'horizontal'
• 'vertical'

toolbox.itemSize   |   number

[ default: 15 ]

工具欄 icon 的大小。

toolbox.itemGap   |   number

[ default: 10 ]

工具欄 icon 每項之間的間隔。橫向布局時為水平間隔，縱向布局時為縱向間隔。

toolbox.showTitle   |   boolean

[ default: true ]

是否在鼠標(biāo) hover 的時候顯示每個工具 icon 的標(biāo)題。

toolbox.zlevel   |   number

[ default: 0 ]

所有工具欄圖形的 zlevel 值。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨(dú)的 zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

toolbox.z   |   number

[ default: 2 ]

組件的所有圖形的 z 值?？刂茍D形的前后順序。z 值小的圖形會被z值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

toolbox.left   |   string, number

[ default: 'auto' ]

工具欄組件離容器左側(cè)的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應(yīng)的位置自動對齊。

toolbox.top   |   string, number

[ default: 'auto' ]

工具欄組件離容器上側(cè)的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應(yīng)的位置自動對齊。

toolbox.right   |   string, number

[ default: 'auto' ]

工具欄組件離容器右側(cè)的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

默認(rèn)自適應(yīng)。

toolbox.bottom   |   string, number

[ default: 'auto' ]

工具欄組件離容器下側(cè)的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

默認(rèn)自適應(yīng)。

toolbox.width   |   string, number

[ default: 'auto' ]

工具欄組件的寬度。默認(rèn)自適應(yīng)。

toolbox.height   |   string, number

[ default: 'auto' ]

工具欄組件的高度。默認(rèn)自適應(yīng)。