Treemap層級設(shè)置

series[i]-treemap.levels[i] Object

配置 ECharts 圖表中 Treemap 的多個(gè)層級。

treemap 中采用『三級配置』：

『每個(gè)節(jié)點(diǎn)』->『每個(gè)層級』->『每個(gè)系列』。

即我們可以對每個(gè)節(jié)點(diǎn)進(jìn)行配置，也可以對樹的每個(gè)層級進(jìn)行配置，也可以 series 上設(shè)置全局配置。節(jié)點(diǎn)上的設(shè)置，優(yōu)先級最高。

最常用的是『每個(gè)層級進(jìn)行配置』，levels 配置項(xiàng)就是每個(gè)層級的配置。例如：

// 注意，這個(gè)數(shù)據(jù)結(jié)構(gòu)實(shí)際不是"tree"而是"forest"
data: [
    {
        name: 'nodeA',
        children: [
            {name: 'nodeAA'},
            {name: 'nodeAB'},
        ]
    },
    {
        name: 'nodeB',
        children: [
            {name: 'nodeBA'}
        ]
    }
],
levels: [
    {...}, // "forest"的頂層配置。即含有 'nodeA', 'nodeB' 的這層。
    {...}, // 下一層配置，即含有 'nodeAA', 'nodeAB', 'nodeBA' 的這層。
    {...}, // 再下一層配置。
    ...
]

視覺映射的規(guī)則

treemap 中首要關(guān)注的是如何在視覺上較好得區(qū)分『不同層級』、『同層級中不同類別』。這需要合理得設(shè)置不同層級的『矩形顏色』、『邊界粗細(xì)』、『邊界顏色』甚至『矩形顏色飽和度』等。

參見這個(gè)例子，最頂層級用顏色區(qū)分，分成了『紅』『綠』『藍(lán)』等大塊。每個(gè)顏色塊中是下一個(gè)層級，使用顏色的飽和度來區(qū)分（參見 colorSaturation）。最外層的矩形邊界是『白色』，下層級的矩形邊界是當(dāng)前區(qū)塊顏色加上飽和度處理（參見 borderColorSaturation）。

treemap 是通過這樣的規(guī)則來支持這種配置的：每個(gè)層級計(jì)算用戶配置的 color、colorSaturation、borderColor、colorSaturation等視覺信息（在levels中配置）。如果子節(jié)點(diǎn)沒有配置，則繼承父的配置，否則使用自己的配置）。

這樣，可以做到：父層級配置 color 列表，子層級配置 colorSaturation。父層級的每個(gè)節(jié)點(diǎn)會(huì)從 color 列表中得到一個(gè)顏色，子層級的節(jié)點(diǎn)會(huì)從 colorSaturation 中得到一個(gè)值，并且繼承父節(jié)點(diǎn)得到的顏色，合成得到自己的最終顏色。

維度與額外的視覺映射

例子：每一個(gè) value 字段是一個(gè) Array，其中每個(gè)項(xiàng)對應(yīng)一個(gè)維度（dimension）。

[
    {
        value: [434, 6969, 8382],
        children: [
            {
                value: [1212, 4943, 5453],
                id: 'someid-1',
                name: 'description of this node',
                children: [...]
            },
            {
                value: [4545, 192, 439],
                id: 'someid-2',
                name: 'description of this node',
                children: [...]
            },
            ...
        ]
    },
    {
        value: [23, 59, 12],
        children: [...]
    },
    ...
]

treemap 默認(rèn)把第一個(gè)維度（Array 第一項(xiàng)）映射到『面積』上。而如果想表達(dá)更多信息，用戶可以把其他的某一個(gè)維度（series-treemap.visualDimension），映射到其他的『視覺元素』上，比如顏色明暗等。參見例子中，legend選擇 Growth時(shí)的狀態(tài)。

矩形邊框（border）/縫隙（gap）設(shè)置如何避免混淆

如果統(tǒng)一用一種顏色設(shè)置矩形的縫隙（gap），那么當(dāng)不同層級的矩形同時(shí)展示時(shí)可能會(huì)出現(xiàn)混淆。

參見 例子，注意其中紅色的區(qū)塊中的子矩形其實(shí)是更深層級，和其他用白色縫隙區(qū)分的矩形不是在一個(gè)層級。所以，紅色區(qū)塊中矩形的分割線的顏色，我們在 borderColorSaturation 中設(shè)置為『加了飽和度變化的紅顏色』，以示區(qū)別。

borderWidth, gapWidth, borderColor 的解釋

visualDimension

treemap 中支持對數(shù)據(jù)其他維度進(jìn)行視覺映射。

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

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

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

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

visualMin

當(dāng)前層級的最小 value 值。如果不設(shè)置則自動(dòng)統(tǒng)計(jì)。

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

visualMax

當(dāng)前層級的最大 value 值。如果不設(shè)置則自動(dòng)統(tǒng)計(jì)。

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

color

這是一個(gè) Array 值，表示同一層級的節(jié)點(diǎn)的顏色選取列表（選擇規(guī)則見 colorMappingBy）。默認(rèn)為空時(shí)，選取系統(tǒng) color 列表。

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

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

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

colorAlpha

表示同一層級的節(jié)點(diǎn)的 顏色透明度 選取范圍。數(shù)值范圍 0 ~ 1。

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

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

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

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

colorSaturation

表示同一層級的節(jié)點(diǎn)的顏色飽和度的選取范圍。數(shù)值范圍 0 ~ 1。

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

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

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

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

colorMappingBy

表示同一層級節(jié)點(diǎn)，在顏色列表中（參見 color 屬性）選擇時(shí)，按照什么來選擇。可選值：

• 'value'：

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

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

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

• 'index'：

將節(jié)點(diǎn)的 index（序號(hào)）映射到顏色列表中。即同一層級中，第一個(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 通過 setOption 變化數(shù)值時(shí)，同一 id 映射到同一顏色，保持一致性。參見 例子。

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

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

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
  
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹每個(gè)層級的統(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)就不顯示。

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

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

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

• 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
  
• 可以存在于 series-treemap.levels 的每個(gè)數(shù)組元素中，表示樹每個(gè)層級的統(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)于視覺設(shè)置，詳見 series-treemap.levels。

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

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

label

label 描述了每個(gè)矩形中，文本標(biāo)簽的樣式。

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

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

upperLabel

upperLabel 用于顯示矩形的父節(jié)點(diǎn)的標(biāo)簽。當(dāng) upperLabel.normal.show 為 true 的時(shí)候，『顯示父節(jié)點(diǎn)標(biāo)簽』功能開啟。

同 series-treemap.label 一樣，upperLabel 可以存在于 series-treemap 的根節(jié)點(diǎn)，或者 series-treemap.level 中，或者 series-treemap.data 的每個(gè)數(shù)據(jù)項(xiàng)中。

series-treemap.label 描述的是，當(dāng)前節(jié)點(diǎn)為葉節(jié)點(diǎn)時(shí)標(biāo)簽的樣式；upperLabel 描述的是，當(dāng)前節(jié)點(diǎn)為非葉節(jié)點(diǎn)（即含有子節(jié)點(diǎn)）時(shí)標(biāo)簽的樣式。（此時(shí)標(biāo)簽一般會(huì)被顯示在節(jié)點(diǎn)的最上部）

參見：

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

itemStyle

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

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