建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)將講述 ECharts 中 Treemap 的一些屬性并介紹這些屬性的一些取值以及這些屬性的一些相關(guān)作用的描述。
創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為隴縣企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，隴縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
Treemap 屬性
type該屬性為 string 類型的值，在 Treemap 圖中它的默認(rèn)值為'treemap'。
zlevel設(shè)置所有 Treemap 圖形的 zlevel 值，取值類型為 number，默認(rèn)值為 0。
zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的 zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
z設(shè)置組件的所有圖形的z值，對圖形的前后順序進行控制。z 值小的圖形會被 z 值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。z 的取值類型與 zlevel 相同，但是它的默認(rèn)值為 2。
lefttreemap 組件離容器左側(cè)的距離。其取值類型可以是 string 和 number，默認(rèn)值為 center。
left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應(yīng)的位置自動對齊。
toptreemap 組件離容器上側(cè)的距離。其取值類型可以是 string 和 number，默認(rèn)值為 middle。
top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應(yīng)的位置自動對齊。
righttreemap 組件離容器右側(cè)的距離。其取值類型可以是 string 和 number，默認(rèn)值為 auto。
right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
默認(rèn)自適應(yīng)。
bottom treemap 組件離容器下側(cè)的距離。其取值類型可以是 string 和 number，默認(rèn)值為 auto。
bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
默認(rèn)自適應(yīng)。
width treemap 組件的寬度。其取值類型可以是 string 和 number，默認(rèn)值為 80%。
height treemap 組件的高度。其取值類型可以是 string 和 number，默認(rèn)值為 80%。
squareRatio 期望矩形長寬比率，取值類型為 number。布局計算時會盡量向這個比率靠近。
默認(rèn)為黃金比：0.5 * (1 + Math.sqrt(5))。
leafDepth設(shè)置了 leafDepth 后，下鉆（drill down）功能開啟，drill down 功能即點擊后才展示子層級。取值類型為 number，默認(rèn)為 null。
leafDepth 表示『展示幾層』，層次更深的節(jié)點則被隱藏起來。點擊則可下鉆看到層次更深的節(jié)點。
例如，leafDepth 設(shè)置為 1，表示展示一層節(jié)點。
默認(rèn)沒有開啟 drill down（即 leafDepth 為 null 或 undefined）。
drill down 的例子：
點擊編輯實例 》》
drillDownIcon當(dāng)節(jié)點可以下鉆時的提示符。只能是字符，默認(rèn)為 '?' 。
roam是否開啟拖拽漫游（移動和縮放）?？扇≈涤校?/p>
- false：關(guān)閉。
- 'scale' 或 'zoom'：只能夠縮放。
- 'move' 或 'pan'：只能夠平移。
- true：縮放和平移均可。
nodeClick 點擊節(jié)點后的行為?？扇≈禐椋?/p>
- false：節(jié)點點擊無反應(yīng)。
- 'zoomToNode'：點擊節(jié)點后縮放到節(jié)點。
- 'link'：如果節(jié)點數(shù)據(jù)中有 link 點擊節(jié)點后會進行超鏈接跳轉(zhuǎn)。
zoomToNodeRatio點擊某個節(jié)點，會自動放大那個節(jié)點到合適的比例（節(jié)點占可視區(qū)域的面積比例），這個配置項就是這個比例。取值類型為 number，默認(rèn)值為 0.32*0.32。
visualDimensiontreemap 中支持對數(shù)據(jù)其他維度進行視覺映射。取值類型為 number，默認(rèn)值為 0。
首先，treemap的數(shù)據(jù)格式（參見 series-treemap.data）中，每個節(jié)點的 value 都可以是數(shù)組。數(shù)組每項是一個『維度』（dimension）。visualDimension 指定了額外的『視覺映射』使用的是數(shù)組的哪一項。默認(rèn)為第 0 項。
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 visualDimension 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設(shè)置。
visualMin當(dāng)前層級的最小 value 值，取值類型為 number。如果不設(shè)置則自動統(tǒng)計。
手動指定 visualMin、visualMax ，即手動控制了 visual mapping 的值域（當(dāng) colorMappingBy 為 'value' 時有意義）。
visualMax當(dāng)前層級的最大 value 值，取值類型與 visualMax 相同。如果不設(shè)置則自動統(tǒng)計。
手動指定 visualMin、visualMax ，即手動控制了 visual mapping 的值域（當(dāng) colorMappingBy 為 'value' 時有意義）。
colorAlpha本系列默認(rèn)的顏色透明度選取范圍。數(shù)值范圍 0 ~ 1。
例如, colorAlpha 可以是 [0.3, 1].
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 colorAlpha 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設(shè)置。
colorSaturation本系列默認(rèn)的 顏色飽和度 選取范圍。數(shù)值范圍 0 ~ 1。
例如, colorSaturation 可以是 [0.3, 1].
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 colorSaturation 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設(shè)置。
colorMappingBy表示同一層級節(jié)點，在顏色列表中（參見 color 屬性）選擇時，按照什么來選擇。可選值：
- 'value'：
將節(jié)點的值（即 series-treemap.data.value）映射到顏色列表中。
這樣得到的顏色，反應(yīng)了節(jié)點值的大小。
可以使用 visualDimension 屬性來設(shè)置，用 data 中哪個緯度的值來映射。
- 'index'：
將節(jié)點的 index（序號）映射到顏色列表中。即同一層級中，第一個節(jié)點取顏色列表中第一個顏色，第二個節(jié)點取第二個。
這樣得到的顏色，便于區(qū)分相鄰節(jié)點。
- 'id'：
將節(jié)點的 id（即 series-treemap.data.id）映射到顏色列表中。id 是用戶指定的，這樣能夠使得，在treemap 通過 setOption 變化數(shù)值時，同一 id 映射到同一顏色，保持一致性。參見 例子。
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 colorMappingBy 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設(shè)置。
visibleMin如果某個節(jié)點的矩形的面積，小于這個數(shù)值（單位：px平方），這個節(jié)點就不顯示。值類型為 number，默認(rèn)為 10。
如果不加這個限制，很小的節(jié)點會影響顯示效果。
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 visibleMin 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設(shè)置。
childrenVisibleMin如果某個節(jié)點的矩形面積，小于這個數(shù)值（單位：px平方），則不顯示這個節(jié)點的子節(jié)點。
這能夠在矩形面積不足夠大時候，隱藏節(jié)點的細節(jié)。當(dāng)用戶用鼠標(biāo)縮放節(jié)點時，如果面積大于此閾值，又會顯示子節(jié)點。
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 childrenVisibleMin 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點中，表示每個節(jié)點的特定設(shè)置。
網(wǎng)頁題目：創(chuàng)新互聯(lián)ECharts教程：ECharts設(shè)置Treemap屬性
瀏覽路徑：http://fisionsoft.com.cn/article/cdcjics.html
