ECharts設(shè)置Treemap屬性

本節(jié)將講述 ECharts 中 Treemap 的一些屬性并介紹這些屬性的一些取值以及這些屬性的一些相關(guān)作用的描述。

Treemap 屬性

type

該屬性為 string 類(lèi)型的值，在 Treemap 圖中它的默認(rèn)值為'treemap'。

zlevel

設(shè)置所有 Treemap 圖形的 zlevel 值，取值類(lèi)型為 number，默認(rèn)值為 0。

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

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

z

設(shè)置組件的所有圖形的z值，對(duì)圖形的前后順序進(jìn)行控制。z 值小的圖形會(huì)被 z 值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。z 的取值類(lèi)型與 zlevel 相同，但是它的默認(rèn)值為 2。

left

treemap 組件離容器左側(cè)的距離。其取值類(lèi)型可以是 string 和 number，默認(rèn)值為 center。

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

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

top

treemap 組件離容器上側(cè)的距離。其取值類(lèi)型可以是 string 和 number，默認(rèn)值為 middle。

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

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

right

treemap 組件離容器右側(cè)的距離。其取值類(lèi)型可以是 string 和 number，默認(rèn)值為 auto。

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

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

bottom 

treemap 組件離容器下側(cè)的距離。其取值類(lèi)型可以是 string 和 number，默認(rèn)值為 auto。

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

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

width 

treemap 組件的寬度。其取值類(lèi)型可以是 string 和 number，默認(rèn)值為 80%。

height 

treemap 組件的高度。其取值類(lèi)型可以是 string 和 number，默認(rèn)值為 80%。

squareRatio 

期望矩形長(zhǎng)寬比率，取值類(lèi)型為 number。布局計(jì)算時(shí)會(huì)盡量向這個(gè)比率靠近。

默認(rèn)為黃金比：0.5 * (1 + Math.sqrt(5))。

leafDepth

設(shè)置了 leafDepth 后，下鉆（drill down）功能開(kāi)啟，drill down 功能即點(diǎn)擊后才展示子層級(jí)。取值類(lèi)型為 number，默認(rèn)為 null。

leafDepth 表示『展示幾層』，層次更深的節(jié)點(diǎn)則被隱藏起來(lái)。點(diǎn)擊則可下鉆看到層次更深的節(jié)點(diǎn)。

例如，leafDepth 設(shè)置為 1，表示展示一層節(jié)點(diǎn)。

默認(rèn)沒(méi)有開(kāi)啟 drill down（即 leafDepth 為 null 或 undefined）。

drill down 的例子：

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

drillDownIcon

當(dāng)節(jié)點(diǎn)可以下鉆時(shí)的提示符。只能是字符，默認(rèn)為 '?' 。

roam

是否開(kāi)啟拖拽漫游（移動(dòng)和縮放）?？扇≈涤校?/p>

• false：關(guān)閉。
• 'scale' 或 'zoom'：只能夠縮放。
• 'move' 或 'pan'：只能夠平移。
• true：縮放和平移均可。

nodeClick 

點(diǎn)擊節(jié)點(diǎn)后的行為?？扇≈禐椋?/p>

• false：節(jié)點(diǎn)點(diǎn)擊無(wú)反應(yīng)。
• 'zoomToNode'：點(diǎn)擊節(jié)點(diǎn)后縮放到節(jié)點(diǎn)。
• 'link'：如果節(jié)點(diǎn)數(shù)據(jù)中有 link 點(diǎn)擊節(jié)點(diǎn)后會(huì)進(jìn)行超鏈接跳轉(zhuǎn)。

zoomToNodeRatio

點(diǎn)擊某個(gè)節(jié)點(diǎn)，會(huì)自動(dòng)放大那個(gè)節(jié)點(diǎn)到合適的比例（節(jié)點(diǎn)占可視區(qū)域的面積比例），這個(gè)配置項(xiàng)就是這個(gè)比例。取值類(lèi)型為 number，默認(rèn)值為 0.32*0.32。

visualDimension

treemap 中支持對(duì)數(shù)據(jù)其他維度進(jìn)行視覺(jué)映射。取值類(lèi)型為 number，默認(rèn)值為 0。

首先，treemap的數(shù)據(jù)格式（參見(jiàn) series-treemap.data）中，每個(gè)節(jié)點(diǎn)的 value 都可以是數(shù)組。數(shù)組每項(xiàng)是一個(gè)『維度』（dimension）。visualDimension 指定了額外的『視覺(jué)映射』使用的是數(shù)組的哪一項(xiàng)。默認(rèn)為第 0 項(xiàng)。

關(guān)于視覺(jué)設(shè)置，詳見(jiàn) series-treemap.levels。

注：treemap中 visualDimension 屬性可能在多處地方存在：

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹(shù)每個(gè)層級(jí)的統(tǒng)一設(shè)置。
• 存在于 series-treemap.data 的每個(gè)節(jié)點(diǎn)中，表示每個(gè)節(jié)點(diǎn)的特定設(shè)置。

visualMin

當(dāng)前層級(jí)的最小 value 值，取值類(lèi)型為 number。如果不設(shè)置則自動(dòng)統(tǒng)計(jì)。

手動(dòng)指定 visualMin、visualMax ，即手動(dòng)控制了 visual mapping 的值域（當(dāng) colorMappingBy 為 'value' 時(shí)有意義）。

visualMax

當(dāng)前層級(jí)的最大 value 值，取值類(lèi)型與 visualMax 相同。如果不設(shè)置則自動(dòng)統(tǒng)計(jì)。

手動(dòng)指定 visualMin、visualMax ，即手動(dòng)控制了 visual mapping 的值域（當(dāng) colorMappingBy 為 'value' 時(shí)有意義）。

colorAlpha

本系列默認(rèn)的顏色透明度選取范圍。數(shù)值范圍 0 ~ 1。

例如, colorAlpha 可以是 [0.3, 1].

關(guān)于視覺(jué)設(shè)置，詳見(jiàn) series-treemap.levels。

注：treemap中 colorAlpha 屬性可能在多處地方存在：

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹(shù)每個(gè)層級(jí)的統(tǒng)一設(shè)置。
• 存在于 series-treemap.data 的每個(gè)節(jié)點(diǎn)中，表示每個(gè)節(jié)點(diǎn)的特定設(shè)置。

colorSaturation

本系列默認(rèn)的 顏色飽和度 選取范圍。數(shù)值范圍 0 ~ 1。

例如, colorSaturation 可以是 [0.3, 1].

關(guān)于視覺(jué)設(shè)置，詳見(jiàn) series-treemap.levels。

注：treemap中 colorSaturation 屬性可能在多處地方存在：

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹(shù)每個(gè)層級(jí)的統(tǒng)一設(shè)置。
• 存在于 series-treemap.data 的每個(gè)節(jié)點(diǎn)中，表示每個(gè)節(jié)點(diǎn)的特定設(shè)置。

colorMappingBy

表示同一層級(jí)節(jié)點(diǎn)，在顏色列表中（參見(jiàn) color 屬性）選擇時(shí)，按照什么來(lái)選擇?？蛇x值：

• 'value'：

將節(jié)點(diǎn)的值（即 series-treemap.data.value）映射到顏色列表中。

這樣得到的顏色，反應(yīng)了節(jié)點(diǎn)值的大小。

可以使用 visualDimension 屬性來(lái)設(shè)置，用 data 中哪個(gè)緯度的值來(lái)映射。

• 'index'：

將節(jié)點(diǎn)的 index（序號(hào)）映射到顏色列表中。即同一層級(jí)中，第一個(gè)節(jié)點(diǎn)取顏色列表中第一個(gè)顏色，第二個(gè)節(jié)點(diǎn)取第二個(gè)。

這樣得到的顏色，便于區(qū)分相鄰節(jié)點(diǎn)。

• 'id'：

將節(jié)點(diǎn)的 id（即 series-treemap.data.id）映射到顏色列表中。id 是用戶指定的，這樣能夠使得，在treemap 通過(guò) setOption 變化數(shù)值時(shí)，同一 id 映射到同一顏色，保持一致性。參見(jiàn) 例子。

關(guān)于視覺(jué)設(shè)置，詳見(jiàn) series-treemap.levels。

注：treemap中 colorMappingBy 屬性可能在多處地方存在：

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹(shù)每個(gè)層級(jí)的統(tǒng)一設(shè)置。
• 存在于 series-treemap.data 的每個(gè)節(jié)點(diǎn)中，表示每個(gè)節(jié)點(diǎn)的特定設(shè)置。

visibleMin

如果某個(gè)節(jié)點(diǎn)的矩形的面積，小于這個(gè)數(shù)值（單位：px平方），這個(gè)節(jié)點(diǎn)就不顯示。值類(lèi)型為 number，默認(rèn)為 10。

如果不加這個(gè)限制，很小的節(jié)點(diǎn)會(huì)影響顯示效果。

關(guān)于視覺(jué)設(shè)置，詳見(jiàn) series-treemap.levels。

注：treemap中 visibleMin 屬性可能在多處地方存在：

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹(shù)每個(gè)層級(jí)的統(tǒng)一設(shè)置。
• 存在于 series-treemap.data 的每個(gè)節(jié)點(diǎn)中，表示每個(gè)節(jié)點(diǎn)的特定設(shè)置。

childrenVisibleMin

如果某個(gè)節(jié)點(diǎn)的矩形面積，小于這個(gè)數(shù)值（單位：px平方），則不顯示這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)。

這能夠在矩形面積不足夠大時(shí)候，隱藏節(jié)點(diǎn)的細(xì)節(jié)。當(dāng)用戶用鼠標(biāo)縮放節(jié)點(diǎn)時(shí)，如果面積大于此閾值，又會(huì)顯示子節(jié)點(diǎn)。

關(guān)于視覺(jué)設(shè)置，詳見(jiàn) series-treemap.levels。

注：treemap中 childrenVisibleMin 屬性可能在多處地方存在：

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹(shù)每個(gè)層級(jí)的統(tǒng)一設(shè)置。
• 存在于 series-treemap.data 的每個(gè)節(jié)點(diǎn)中，表示每個(gè)節(jié)點(diǎn)的特定設(shè)置。