建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)將講述 ECharts 中 Treemap 的一些屬性并介紹這些屬性的一些取值以及這些屬性的一些相關(guān)作用的描述。
創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)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)驗(yàn)和眾多成功案例,為您定制開發(fā)。
Treemap 屬性
type該屬性為 string 類型的值，在 Treemap 圖中它的默認(rèn)值為'treemap'。
zlevel設(shè)置所有 Treemap 圖形的 zlevel 值，取值類型為 number，默認(rèn)值為 0。
zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨(dú)的 zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
z設(shè)置組件的所有圖形的z值，對圖形的前后順序進(jìn)行控制。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。布局計(jì)算時會盡量向這個比率靠近。
默認(rèn)為黃金比：0.5 * (1 + Math.sqrt(5))。
leafDepth設(shè)置了 leafDepth 后，下鉆（drill down）功能開啟，drill down 功能即點(diǎn)擊后才展示子層級。取值類型為 number，默認(rèn)為 null。
leafDepth 表示『展示幾層』，層次更深的節(jié)點(diǎn)則被隱藏起來。點(diǎn)擊則可下鉆看到層次更深的節(jié)點(diǎn)。
例如，leafDepth 設(shè)置為 1，表示展示一層節(jié)點(diǎn)。
默認(rèn)沒有開啟 drill down（即 leafDepth 為 null 或 undefined）。
drill down 的例子：
點(diǎn)擊編輯實(shí)例 》》
drillDownIcon當(dāng)節(jié)點(diǎn)可以下鉆時的提示符。只能是字符，默認(rèn)為 '?' 。
roam是否開啟拖拽漫游（移動和縮放）?？扇≈涤校?/p>
- false：關(guān)閉。
- 'scale' 或 'zoom'：只能夠縮放。
- 'move' 或 'pan'：只能夠平移。
- true：縮放和平移均可。
nodeClick 點(diǎn)擊節(jié)點(diǎn)后的行為?？扇≈禐椋?/p>
- false：節(jié)點(diǎn)點(diǎn)擊無反應(yīng)。
- 'zoomToNode'：點(diǎn)擊節(jié)點(diǎn)后縮放到節(jié)點(diǎn)。
- 'link'：如果節(jié)點(diǎn)數(shù)據(jù)中有 link 點(diǎn)擊節(jié)點(diǎn)后會進(jìn)行超鏈接跳轉(zhuǎn)。
zoomToNodeRatio點(diǎn)擊某個節(jié)點(diǎn)，會自動放大那個節(jié)點(diǎn)到合適的比例（節(jié)點(diǎn)占可視區(qū)域的面積比例），這個配置項(xiàng)就是這個比例。取值類型為 number，默認(rèn)值為 0.32*0.32。
visualDimensiontreemap 中支持對數(shù)據(jù)其他維度進(jìn)行視覺映射。取值類型為 number，默認(rèn)值為 0。
首先，treemap的數(shù)據(jù)格式（參見 series-treemap.data）中，每個節(jié)點(diǎn)的 value 都可以是數(shù)組。數(shù)組每項(xiàng)是一個『維度』（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 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點(diǎn)中，表示每個節(jié)點(diǎn)的特定設(shè)置。
visualMin當(dāng)前層級的最小 value 值，取值類型為 number。如果不設(shè)置則自動統(tǒng)計(jì)。
手動指定 visualMin、visualMax ，即手動控制了 visual mapping 的值域（當(dāng) colorMappingBy 為 'value' 時有意義）。
visualMax當(dāng)前層級的最大 value 值，取值類型與 visualMax 相同。如果不設(shè)置則自動統(tǒng)計(jì)。
手動指定 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é)點(diǎn)中，表示每個節(jié)點(diǎn)的特定設(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é)點(diǎn)中，表示每個節(jié)點(diǎn)的特定設(shè)置。
colorMappingBy表示同一層級節(jié)點(diǎn)，在顏色列表中（參見 color 屬性）選擇時，按照什么來選擇?？蛇x值：
- 'value'：
將節(jié)點(diǎn)的值（即 series-treemap.data.value）映射到顏色列表中。
這樣得到的顏色，反應(yīng)了節(jié)點(diǎn)值的大小。
可以使用 visualDimension 屬性來設(shè)置，用 data 中哪個緯度的值來映射。
- 'index'：
將節(jié)點(diǎn)的 index（序號）映射到顏色列表中。即同一層級中，第一個節(jié)點(diǎn)取顏色列表中第一個顏色，第二個節(jié)點(diǎn)取第二個。
這樣得到的顏色，便于區(qū)分相鄰節(jié)點(diǎn)。
- 'id'：
將節(jié)點(diǎn)的 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é)點(diǎn)中，表示每個節(jié)點(diǎn)的特定設(shè)置。
visibleMin如果某個節(jié)點(diǎn)的矩形的面積，小于這個數(shù)值（單位：px平方），這個節(jié)點(diǎn)就不顯示。值類型為 number，默認(rèn)為 10。
如果不加這個限制，很小的節(jié)點(diǎn)會影響顯示效果。
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 visibleMin 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點(diǎn)中，表示每個節(jié)點(diǎn)的特定設(shè)置。
childrenVisibleMin如果某個節(jié)點(diǎn)的矩形面積，小于這個數(shù)值（單位：px平方），則不顯示這個節(jié)點(diǎn)的子節(jié)點(diǎn)。
這能夠在矩形面積不足夠大時候，隱藏節(jié)點(diǎn)的細(xì)節(jié)。當(dāng)用戶用鼠標(biāo)縮放節(jié)點(diǎn)時，如果面積大于此閾值，又會顯示子節(jié)點(diǎn)。
關(guān)于視覺設(shè)置，詳見 series-treemap.levels。
注：treemap中 childrenVisibleMin 屬性可能在多處地方存在：
- 可以存在于 sereis-treemap 根下，表示本系列全局的統(tǒng)一設(shè)置。
- 可以存在于 series-treemap.levels 的每個數(shù)組元素中，表示樹每個層級的統(tǒng)一設(shè)置。
- 存在于 series-treemap.data 的每個節(jié)點(diǎn)中，表示每個節(jié)點(diǎn)的特定設(shè)置。
分享題目：創(chuàng)新互聯(lián)ECharts教程：ECharts設(shè)置Treemap屬性
網(wǎng)頁URL：http://www.dlmjj.cn/article/cdcjics.html
