建站
咨詢
售后
建站咨詢
新聞中心
series[i]-treemap.levels[i] Object
配置 ECharts 圖表中 Treemap 的多個層級。
站在用戶的角度思考問題，與客戶深入溝通，找到周寧網站設計與周寧網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網站設計制作、網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣、主機域名、網站空間、企業(yè)郵箱。業(yè)務覆蓋周寧地區(qū)。
treemap 中采用『三級配置』：
『每個節(jié)點』->『每個層級』->『每個系列』。即我們可以對每個節(jié)點進行配置，也可以對樹的每個層級進行配置，也可以 series 上設置全局配置。節(jié)點上的設置，優(yōu)先級最高。
最常用的是『每個層級進行配置』，levels 配置項就是每個層級的配置。例如：
// 注意，這個數(shù)據(jù)結構實際不是"tree"而是"forest"
data: [
{
name: 'nodeA',
children: [
{name: 'nodeAA'},
{name: 'nodeAB'},
]
},
{
name: 'nodeB',
children: [
{name: 'nodeBA'}
]
}
],
levels: [
{...}, // "forest"的頂層配置。即含有 'nodeA', 'nodeB' 的這層。
{...}, // 下一層配置，即含有 'nodeAA', 'nodeAB', 'nodeBA' 的這層。
{...}, // 再下一層配置。
...
]視覺映射的規(guī)則
treemap 中首要關注的是如何在視覺上較好得區(qū)分『不同層級』、『同層級中不同類別』。這需要合理得設置不同層級的『矩形顏色』、『邊界粗細』、『邊界顏色』甚至『矩形顏色飽和度』等。
參見這個例子，最頂層級用顏色區(qū)分，分成了『紅』『綠』『藍』等大塊。每個顏色塊中是下一個層級，使用顏色的飽和度來區(qū)分（參見 colorSaturation）。最外層的矩形邊界是『白色』，下層級的矩形邊界是當前區(qū)塊顏色加上飽和度處理（參見 borderColorSaturation）。
treemap 是通過這樣的規(guī)則來支持這種配置的：每個層級計算用戶配置的 color、colorSaturation、borderColor、colorSaturation等視覺信息（在levels中配置）。如果子節(jié)點沒有配置，則繼承父的配置，否則使用自己的配置）。
這樣，可以做到：父層級配置 color 列表，子層級配置 colorSaturation。父層級的每個節(jié)點會從 color 列表中得到一個顏色，子層級的節(jié)點會從 colorSaturation 中得到一個值，并且繼承父節(jié)點得到的顏色，合成得到自己的最終顏色。
維度與額外的視覺映射
例子：每一個 value 字段是一個 Array，其中每個項對應一個維度（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 默認把第一個維度（Array 第一項）映射到『面積』上。而如果想表達更多信息，用戶可以把其他的某一個維度（series-treemap.visualDimension），映射到其他的『視覺元素』上，比如顏色明暗等。參見例子中，legend選擇 Growth時的狀態(tài)。
矩形邊框（border）/縫隙（gap）設置如何避免混淆
如果統(tǒng)一用一種顏色設置矩形的縫隙（gap），那么當不同層級的矩形同時展示時可能會出現(xiàn)混淆。
參見 例子，注意其中紅色的區(qū)塊中的子矩形其實是更深層級，和其他用白色縫隙區(qū)分的矩形不是在一個層級。所以，紅色區(qū)塊中矩形的分割線的顏色，我們在 borderColorSaturation 中設置為『加了飽和度變化的紅顏色』，以示區(qū)別。
borderWidth, gapWidth, borderColor 的解釋
visualDimensiontreemap 中支持對數(shù)據(jù)其他維度進行視覺映射。
首先，treemap 的數(shù)據(jù)格式（參見 series-treemap.data）中，每個節(jié)點的 value 都可以是數(shù)組。數(shù)組每項是一個『維度』（dimension）。visualDimension 指定了額外的『視覺映射』使用的是數(shù)組的哪一項。默認為第 0 項。
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 visualDimension 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
visualMin當前層級的最小 value 值。如果不設置則自動統(tǒng)計。
手動指定 visualMin、visualMax ，即手動控制了 visual mapping 的值域（當 colorMappingBy 為 'value' 時有意義）。
visualMax當前層級的最大 value 值。如果不設置則自動統(tǒng)計。
手動指定 visualMin、visualMax ，即手動控制了 visual mapping 的值域（當 colorMappingBy 為 'value' 時有意義）。
color這是一個 Array 值，表示同一層級的節(jié)點的顏色選取列表（選擇規(guī)則見 colorMappingBy）。默認為空時，選取系統(tǒng) color 列表。
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 color 屬性可能在多處地方存在：
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
colorAlpha表示同一層級的節(jié)點的 顏色透明度 選取范圍。數(shù)值范圍 0 ~ 1。
例如, colorAlpha 可以是 [0.3, 1].
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 colorAlpha 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
colorSaturation表示同一層級的節(jié)點的顏色飽和度的選取范圍。數(shù)值范圍 0 ~ 1。
例如, colorSaturation 可以是 [0.3, 1].
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 colorSaturation 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
colorMappingBy表示同一層級節(jié)點，在顏色列表中（參見 color 屬性）選擇時，按照什么來選擇?？蛇x值：
- 'value'：
將節(jié)點的值（即 series-treemap.data.value）映射到顏色列表中。
這樣得到的顏色，反應了節(jié)點值的大小。
可以使用 visualDimension 屬性來設置，用 data 中哪個緯度的值來映射。
- 'index'：
將節(jié)點的 index（序號）映射到顏色列表中。即同一層級中，第一個節(jié)點取顏色列表中第一個顏色，第二個節(jié)點取第二個。
這樣得到的顏色，便于區(qū)分相鄰節(jié)點。
- 'id'：
將節(jié)點的 id（即 series-treemap.data.id）映射到顏色列表中。id 是用戶指定的，這樣能夠使得，在treemap 通過 setOption 變化數(shù)值時，同一 id 映射到同一顏色，保持一致性。參見 例子。
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 colorMappingBy 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
visibleMin如果某個節(jié)點的矩形的面積，小于這個數(shù)值（單位：px平方），這個節(jié)點就不顯示。
如果不加這個限制，很小的節(jié)點會影響顯示效果。
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 visibleMin 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
childrenVisibleMin如果某個節(jié)點的矩形面積，小于這個數(shù)值（單位：px平方），則不顯示這個節(jié)點的子節(jié)點。
這能夠在矩形面積不足夠大時候，隱藏節(jié)點的細節(jié)。當用戶用鼠標縮放節(jié)點時，如果面積大于此閾值，又會顯示子節(jié)點。
關于視覺設置，詳見 series-treemap.levels。
注：treemap中 childrenVisibleMin 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
labellabel 描述了每個矩形中，文本標簽的樣式。
注：treemap中 label 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
upperLabelupperLabel 用于顯示矩形的父節(jié)點的標簽。當 upperLabel.normal.show 為 true 的時候，『顯示父節(jié)點標簽』功能開啟。
同 series-treemap.label 一樣，upperLabel 可以存在于 series-treemap 的根節(jié)點，或者 series-treemap.level 中，或者 series-treemap.data 的每個數(shù)據(jù)項中。
series-treemap.label 描述的是，當前節(jié)點為葉節(jié)點時標簽的樣式；upperLabel 描述的是，當前節(jié)點為非葉節(jié)點（即含有子節(jié)點）時標簽的樣式。（此時標簽一般會被顯示在節(jié)點的最上部）
參見：
點擊編輯實例 》》
itemStyle注：treemap中 itemStyle 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設置。
網頁標題：創(chuàng)新互聯(lián)ECharts教程：Treemap層級設置
文章分享：http://fisionsoft.com.cn/article/djsiioe.html
