echarts属性之series-treemap

一行注释

1833人浏览 · 2024-10-29 17:16:35

一行注释 · 2024-10-29 17:16:35 发布

series-treemap

Treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式，便于突出展现出『树』的各层级中重要的节点。

示例：

视觉映射：

treemap 首先是把数值映射到『面积』这种视觉元素上。

此外，也支持对数据的其他维度进行视觉映射，例如映射到颜色、颜色明暗度上。

关于视觉设置，详见 series-treemap.levels。

下钻（drill down）：

drill down 功能即点击后才展示子层级。设置了 leafDepth 后，下钻（drill down）功能开启。

如下是 drill down 的例子：

注：treemap 的配置项和 ECharts2 相比有一些变化，一些不太成熟的配置方式不再支持或不再兼容：

center/size 方式的定位不再支持，而是统一使用 left/top/bottom/right/width/height 方式定位。
breadcrumb 的配置被移动到了 itemStyle/itemStyle.emphasis 外部，和 itemStyle 平级。
root 的设置暂时不支持。目前可以使用 zoom 的方式来查看树更下层次的细节，或者使用 leafDepth 开启 "drill down" 功能。
label 的配置被移动到了 itemStyle/itemStyle.emphasis 外部，和 itemStyle 平级。
itemStyle.childBorderWidth、itemStyle.childBorderColor不再支持（因为这个配置方式只能定义两层的treemap）。统一使用 series-treemap.levels 来进行各层级的定义。

所有属性

series-treemap. type = 'treemap'

string

series-treemap. id

string

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

series-treemap. name

string

系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

series-treemap. zlevel

number

所有图形的 zlevel 值。

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series-treemap. z = 2

number

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低，而且不会创建新的 Canvas。

series-treemap. left = center 试一试

stringnumber

treemap 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。

series-treemap. top = middle 试一试

stringnumber

treemap 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

series-treemap. right = 'auto' 试一试

stringnumber

treemap 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series-treemap. bottom = 'auto' 试一试

stringnumber

treemap 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series-treemap. width = 80% 试一试

stringnumber

treemap 组件的宽度。

series-treemap. height = 80% 试一试

stringnumber

treemap 组件的高度。

series-treemap. squareRatio 试一试

number

期望矩形长宽比率。布局计算时会尽量向这个比率靠近。

默认为黄金比：0.5 * (1 + Math.sqrt(5))。

series-treemap. leafDepth 试一试

number

设置了 leafDepth 后，下钻（drill down）功能开启。drill down 功能即点击后才展示子层级。

leafDepth 表示『展示几层』，层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。

例如，leafDepth 设置为 1，表示展示一层节点。

默认没有开启 drill down（即 leafDepth 为 null 或 undefined）。

drill down 的例子：

series-treemap. drillDownIcon = '▶'

string

当节点可以下钻时的提示符。只能是字符。

series-treemap. roam = true 试一试

booleanstring

是否开启拖拽漫游（移动和缩放）。可取值有：

false：关闭。
'scale' 或 'zoom'：只能够缩放。
'move' 或 'pan'：只能够平移。
true：缩放和平移均可。

series-treemap. scaleLimit

Object

从 v5.5.1 开始支持

滚轮缩放的极限控制，通过 min 和 max 限制最小和最大的缩放值。

series-treemap.scaleLimit. min

number

最小的缩放值

series-treemap.scaleLimit. max

number

最大的缩放值

series-treemap. nodeClick = 'zoomToNode'

booleanstring

点击节点后的行为。可取值为：

false：节点点击无反应。
'zoomToNode'：点击节点后缩放到节点。
'link'：如果节点数据中有 link 点击节点后会进行超链接跳转。

series-treemap. zoomToNodeRatio = 0.32*0.32 试一试

number

点击某个节点，会自动放大那个节点到合适的比例（节点占可视区域的面积比例），这个配置项就是这个比例。

series-treemap. visualDimension

number

treemap 中支持对数据其他维度进行视觉映射。

首先，treemap的数据格式（参见 series-treemap.data）中，每个节点的 value 都可以是数组。数组每项是一个『维度』（dimension）。visualDimension 指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 0 项。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 visualDimension 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap. visualMin 试一试

number

当前层级的最小 value 值。如果不设置则自动统计。

手动指定 visualMin、visualMax ，即手动控制了 visual mapping 的值域（当 colorMappingBy 为 'value' 时有意义）。

series-treemap. visualMax 试一试

number

当前层级的最大 value 值。如果不设置则自动统计。

手动指定 visualMin、visualMax ，即手动控制了 visual mapping 的值域（当 colorMappingBy 为 'value' 时有意义）。

series-treemap. colorAlpha

Array

本系列默认的颜色透明度选取范围。

数值范围 0 ~ 1

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

关于视觉设置，详见 series-treemap.levels。

注：treemap中 colorAlpha 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap. colorSaturation

number

本系列默认的节点的颜色饱和度选取范围。

数值范围 0 ~ 1。

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

关于视觉设置，详见 series-treemap.levels。

注：treemap中 colorSaturation 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap. colorMappingBy = 'index' 试一试

string

表示同一层级节点，在颜色列表中（参见 color 属性）选择时，按照什么来选择。可选值：

'value'：

将节点的值（即 series-treemap.data.value）映射到颜色列表中。

这样得到的颜色，反应了节点值的大小。

可以使用 visualDimension 属性来设置，用 data 中哪个纬度的值来映射。

'index'：

将节点的 index（序号）映射到颜色列表中。即同一层级中，第一个节点取颜色列表中第一个颜色，第二个节点取第二个。

这样得到的颜色，便于区分相邻节点。

'id'：

将节点的 id（即 series-treemap.data.id）映射到颜色列表中。id 是用户指定的，这样能够使得，在treemap 通过 setOption 变化数值时，同一 id 映射到同一颜色，保持一致性。参见例子。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 colorMappingBy 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap. visibleMin = 10 试一试

number

如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。

如果不加这个限制，很小的节点会影响显示效果。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 visibleMin 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap. childrenVisibleMin 试一试

number

如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。

这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 childrenVisibleMin 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap. label

Object

label 描述了每个矩形中，文本标签的样式。

注：treemap中 label 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.label. show 试一试

boolean

是否显示标签。

series-treemap.label. position = 'inside' 试一试

stringArray

标签的位置。

可以通过内置的语义声明位置：

示例：
```
  position: 'top'
```
支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。

示例：
```
  // 绝对的像素值
  position: [10, 10],
  // 相对的百分比
  position: ['50%', '50%']
```

参见：label position。

series-treemap.label. distance = 5 试一试

number

距离图形元素的距离。

当 position 为字符描述值（如 'top'、'insideRight'）时候有效。

参见：label position。

series-treemap.label. rotate 试一试

number

标签旋转。从 -90 度到 90 度。正值是逆时针。

参见：label rotation。

series-treemap.label. offset 试一试

Array

是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。

series-treemap.label. minMargin

number

从 v5.0.0 开始支持

用于控制标签之间的最小距离，当启用 labelLayout 时可能会用到。

series-treemap.label. formatter

stringFunction

标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

示例：

formatter: '{b}: {@score}'

回调函数

回调函数格式：

(params: Object|Array) => string

参数 params 是 formatter 需要的单个数据集。格式如下：

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefined，表示 dimension index 。
    // 其内容如：
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index，如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,
    // 当前节点的祖先节点（包括自身）
    treeAncestors: Array
}

注：encode 和 dimensionNames 的使用方式，例如：

如果数据为：

dataset: {
    source: [
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
}

则可这样得到 y 轴对应的 value：

params.value[params.encode.y[0]]

如果数据为：

dataset: {
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
    ]
}

则可这样得到 y 轴对应的 value：

params.value[params.dimensionNames[params.encode.y[0]]]

series-treemap.label. color = '#fff' 试一试

Color

文字的颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.label. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选：

'normal'
'italic'
'oblique'

series-treemap.label. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选：

'normal'
'bold'
'bolder'
'lighter'
100 | 200 | 300 | 400...

series-treemap.label. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

series-treemap.label. fontSize = 12 试一试

number

文字的字体大小。

series-treemap.label. align 试一试

string

文字水平对齐方式，默认自动。

可选：

'left'
'center'
'right'

rich 中如果没有设置 align，则会取父层级的 align。例如：

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}

series-treemap.label. verticalAlign 试一试

string

文字垂直对齐方式，默认自动。

可选：

'top'
'middle'
'bottom'

rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}

series-treemap.label. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

series-treemap.label. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.label. borderColor 试一试

Color

文字块边框颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.label. borderWidth 试一试

number

文字块边框宽度。

series-treemap.label. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

series-treemap.label. borderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

series-treemap.label. borderRadius 试一试

numberArray

文字块的圆角。

series-treemap.label. padding = 5 试一试

numberArray

文字块的内边距。例如：

padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
padding: 4：表示 padding: [4, 4, 4, 4]。
padding: [3, 4]：表示 padding: [3, 4, 3, 4]。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

series-treemap.label. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

series-treemap.label. shadowBlur 试一试

number

文字块的背景阴影长度。

series-treemap.label. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

series-treemap.label. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

series-treemap.label. width 试一试

number

文本显示宽度。

series-treemap.label. height 试一试

number

文本显示高度。

series-treemap.label. textBorderColor 试一试

Color

文字本身的描边颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.label. textBorderWidth 试一试

number

文字本身的描边宽度。

series-treemap.label. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

series-treemap.label. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

series-treemap.label. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

series-treemap.label. textShadowBlur 试一试

number

文字本身的阴影长度。

series-treemap.label. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

series-treemap.label. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

series-treemap.label. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
'break' 换行
'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行

series-treemap.label. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

series-treemap. upperLabel

Object

upperLabel 用于显示矩形的父节点的标签。当 upperLabel.show 为 true 的时候，『显示父节点标签』功能开启。

同 series-treemap.label 一样，upperLabel 可以存在于 series-treemap 的根节点，或者 series-treemap.level 中，或者 series-treemap.data 的每个数据项中。

series-treemap.label 描述的是，当前节点为叶节点时标签的样式；upperLabel 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）

参见：

注：treemap中 label 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.upperLabel. show 试一试

boolean

是否显示标签。

series-treemap.upperLabel. position = 'inside' 试一试

stringArray

标签的位置。

可以通过内置的语义声明位置：

示例：
```
  position: 'top'
```
支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。

示例：
```
  // 绝对的像素值
  position: [10, 10],
  // 相对的百分比
  position: ['50%', '50%']
```

参见：label position。

series-treemap.upperLabel. distance = 5 试一试

number

距离图形元素的距离。

当 position 为字符描述值（如 'top'、'insideRight'）时候有效。

参见：label position。

series-treemap.upperLabel. rotate 试一试

number

标签旋转。从 -90 度到 90 度。正值是逆时针。

参见：label rotation。

series-treemap.upperLabel. offset 试一试

Array

是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。

series-treemap.upperLabel. formatter

stringFunction

标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

示例：

formatter: '{b}: {@score}'

回调函数

回调函数格式：

(params: Object|Array) => string

参数 params 是 formatter 需要的单个数据集。格式如下：

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefined，表示 dimension index 。
    // 其内容如：
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index，如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,
    // 当前节点的祖先节点（包括自身）
    treeAncestors: Array
}

注：encode 和 dimensionNames 的使用方式，例如：

如果数据为：

dataset: {
    source: [
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
}

则可这样得到 y 轴对应的 value：

params.value[params.encode.y[0]]

如果数据为：

dataset: {
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
    ]
}

则可这样得到 y 轴对应的 value：

params.value[params.dimensionNames[params.encode.y[0]]]

series-treemap.upperLabel. color = '#fff' 试一试

Color

文字的颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.upperLabel. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选：

'normal'
'italic'
'oblique'

series-treemap.upperLabel. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选：

'normal'
'bold'
'bolder'
'lighter'
100 | 200 | 300 | 400...

series-treemap.upperLabel. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

series-treemap.upperLabel. fontSize = 12 试一试

number

文字的字体大小。

series-treemap.upperLabel. align 试一试

string

文字水平对齐方式，默认自动。

可选：

'left'
'center'
'right'

rich 中如果没有设置 align，则会取父层级的 align。例如：

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}

series-treemap.upperLabel. verticalAlign 试一试

string

文字垂直对齐方式，默认自动。

可选：

'top'
'middle'
'bottom'

rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}

series-treemap.upperLabel. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

series-treemap.upperLabel. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.upperLabel. borderColor 试一试

Color

文字块边框颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.upperLabel. borderWidth 试一试

number

文字块边框宽度。

series-treemap.upperLabel. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

series-treemap.upperLabel. borderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

series-treemap.upperLabel. borderRadius 试一试

numberArray

文字块的圆角。

series-treemap.upperLabel. padding 试一试

numberArray

文字块的内边距。例如：

padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
padding: 4：表示 padding: [4, 4, 4, 4]。
padding: [3, 4]：表示 padding: [3, 4, 3, 4]。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

series-treemap.upperLabel. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

series-treemap.upperLabel. shadowBlur 试一试

number

文字块的背景阴影长度。

series-treemap.upperLabel. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

series-treemap.upperLabel. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

series-treemap.upperLabel. width 试一试

number

文本显示宽度。

series-treemap.upperLabel. height = 20 试一试

number

父节点标签区的高度。

series-treemap.upperLabel. textBorderColor 试一试

Color

文字本身的描边颜色。

如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。

series-treemap.upperLabel. textBorderWidth 试一试

number

文字本身的描边宽度。

series-treemap.upperLabel. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

series-treemap.upperLabel. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

series-treemap.upperLabel. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

series-treemap.upperLabel. textShadowBlur 试一试

number

文字本身的阴影长度。

series-treemap.upperLabel. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

series-treemap.upperLabel. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

series-treemap.upperLabel. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
'break' 换行
'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行

series-treemap.upperLabel. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

series-treemap.upperLabel. rich

Object

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程：富文本标签

所有属性

{ <style_name> }

series-treemap. itemStyle

Object

注：treemap中 itemStyle 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.itemStyle. color 试一试

Color

矩形的颜色。默认从全局调色盘 option.color 获取颜色。

series-treemap.itemStyle. borderRadius 试一试

numberArray

矩形圆角。

series-treemap.itemStyle. borderWidth 试一试

number

矩形边框线宽。为 0 时无边框。而矩形的内部子矩形（子节点）的间隔距离是由 gapWidth 指定的。

series-treemap.itemStyle. gapWidth 试一试

number

矩形内部子矩形（子节点）的间隔距离。

series-treemap.itemStyle. borderColor = '#fff', 试一试

Color

矩形边框和矩形间隔（gap）的颜色。

series-treemap.itemStyle. borderColorSaturation 试一试

Color

矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。

注意：

如果设置此属性，则 borderColor 的设置无效，而是：取当前节点计算出的颜色（比如从父节点遗传而来），在此颜色值上设置 borderColorSaturation 得到最终颜色。这种方式，能够做出『不同区块有不同色调的矩形间隔线』的效果，能够便于区分层级。

矩形边框（border）/缝隙（gap）设置如何避免混淆

如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。

参见例子，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 borderColorSaturation 中设置为『加了饱和度变化的红颜色』，以示区别。

series-treemap.itemStyle. shadowBlur 试一试

number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series-treemap.itemStyle. shadowColor 试一试

Color

阴影颜色。支持的格式同color。

series-treemap.itemStyle. shadowOffsetX 试一试

number

阴影水平方向上的偏移距离。

series-treemap.itemStyle. shadowOffsetY 试一试

number

阴影垂直方向上的偏移距离。

series-treemap.itemStyle. opacity = 1 试一试

number

图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

series-treemap.itemStyle. decal

Object

图形的贴花图案，在 aria.enabled 与 aria.decal.show 都是 true 的情况下才生效。

如果为 'none' 表示不使用贴花图案。

所有属性

{ symbol , symbolSize , symbolKeepAspect , color , backgroundColor , dashArrayX , dashArrayY , rotation , maxTileWidth , maxTileHeight }

series-treemap.emphasis. disabled 试一试

boolean

从 v5.3.0 开始支持

是否关闭高亮状态。

关闭高亮状态可以在鼠标移到图形上，tooltip 触发，或者图例联动的时候不再触发高亮效果。在图形非常多的时候可以关闭以提升交互流畅性。

series-treemap.emphasis. focus = 'none'

string

从 v5.0.0 开始支持

在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：

'none' 不淡出其它图形，默认使用该配置。
'self' 只聚焦（不淡出）当前高亮的数据的图形。

'series' 聚焦当前高亮的数据所在的系列的所有图形。

'ancestor' 聚焦所有祖先节点。
'descendant' 聚焦所有子孙节点。

示例：

下面代码配置了柱状图在高亮一个图形的时候，淡出当前直角坐标系所有其它的系列。

emphasis: {
    focus: 'series',
    blurScope: 'coordinateSystem'
}

series-treemap.emphasis. blurScope = 'coordinateSystem'

string

从 v5.0.0 开始支持

在开启focus的时候，可以通过blurScope配置淡出的范围。支持如下配置

'coordinateSystem' 淡出范围为坐标系，默认使用该配置。
'series' 淡出范围为系列。
'global' 淡出范围为全局。

series-treemap.emphasis. label

Object

所有属性

{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-treemap.emphasis. labelLine

Object

从 v5.0.0 开始支持

标签的视觉引导线配置。

所有属性

{ show , lineStyle }

series-treemap.emphasis. upperLabel

Object

所有属性

series-treemap.emphasis. itemStyle

Object

所有属性

{ color }

series-treemap.blur. labelLine

Object

从 v5.0.0 开始支持

标签的视觉引导线配置。

所有属性

{ show , lineStyle }

series-treemap.blur. upperLabel

Object

所有属性

series-treemap.blur. itemStyle

Object

所有属性

{ color }

series-treemap.select. disabled 试一试

boolean

从 v5.3.0 开始支持

是否可以被选中。在开启selectedMode的时候有效，可以用于关闭部分数据。

series-treemap.select. labelLine

Object

从 v5.0.0 开始支持

标签的视觉引导线配置。

所有属性

{ show , lineStyle }

series-treemap.select. upperLabel

Object

所有属性

series-treemap.select. itemStyle

Object

所有属性

{ color }

series-treemap. selectedMode 试一试

booleanstring

从 v5.0.0 开始支持

选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，'series' 分别表示单选，多选以及选择整个系列。

从 v5.3.0 开始支持 'series'。

series-treemap.breadcrumb. show = true 试一试

boolean

是否显示面包屑。

series-treemap.breadcrumb. left = 'center' 试一试

stringnumber

面包屑组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。

series-treemap.breadcrumb. top = 'bottom' 试一试

stringnumber

面包屑组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

series-treemap.breadcrumb. right = 'auto' 试一试

stringnumber

面包屑组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series-treemap.breadcrumb. bottom = 'auto' 试一试

stringnumber

面包屑组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series-treemap.breadcrumb. height = 22 试一试

number

面包屑的高度。

series-treemap.breadcrumb. emptyItemWidth = 25 试一试

number

当面包屑没有内容时候，设个最小宽度。

series-treemap.breadcrumb. itemStyle

Object

图形样式。

所有属性

{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , textStyle }

series-treemap.breadcrumb. emphasis

Object

从 v5.4.0 开始支持

所有属性

{ itemStyle }

series-treemap.labelLine. show 试一试

boolean

是否显示视觉引导线。

series-treemap.labelLine. showAbove

boolean

从 v5.0.0 开始支持

是否显示在图形上方。

series-treemap.labelLine. length2 试一试

number

视觉引导项第二段的长度。

series-treemap.labelLine. smooth 试一试

booleannumber

是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。

series-treemap.labelLine. minTurnAngle

number

从 v5.0.0 开始支持

通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。

可以设置为 0 - 180 度。

series-treemap.labelLine. lineStyle

Object

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

series-treemap. labelLayout

ObjectFunction

从 v5.0.0 开始支持

标签的统一布局配置。

该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。

该配置项也可以是一个有如下参数的回调函数

// 标签对应数据的 dataIndex
dataIndex: number
// 标签对应的数据类型，只在关系图中会有 node 和 edge 数据类型的区分
dataType?: string
// 标签对应的系列的 index
seriesIndex: number
// 标签显示的文本
text: string
// 默认的标签的包围盒，由系列默认的标签布局决定
labelRect: {x: number, y: number, width: number, height: number}
// 默认的标签水平对齐
align: 'left' | 'center' | 'right'
// 默认的标签垂直对齐
verticalAlign: 'top' | 'middle' | 'bottom'
// 标签所对应的数据图形的包围盒，可用于定位标签位置
rect: {x: number, y: number, width: number, height: number}
// 默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置
// 如果没有该值则为 null
labelLinePoints?: number[][]

示例：

将标签显示在图形右侧 10px 的位置，并且垂直居中：

labelLayout(params) {
    return {
        x: params.rect.x + 10,
        y: params.rect.y + params.rect.height / 2,
        verticalAlign: 'middle',
        align: 'left'
    }
}

根据图形的包围盒尺寸决定文本尺寸


labelLayout(params) {
    return {
        fontSize: Math.max(params.rect.width / 10, 5)
    };
}

series-treemap.labelLayout. hideOverlap

boolean

是否隐藏重叠的标签。

下面示例演示了在关系图中开启该配置后，在缩放时可以实现自动的标签隐藏。

series-treemap.labelLayout. moveOverlap

string

在标签重叠的时候是否挪动标签位置以防止重叠。

目前支持配置为：

'shiftX' 水平方向依次位移，在水平方向对齐时使用
'shiftY' 垂直方向依次位移，在垂直方向对齐时使用

下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。

series-treemap.labelLayout. x

numberstring

标签的 x 位置。支持绝对的像素值或者'20%'这样的相对值。

series-treemap.labelLayout. y

numberstring

标签的 y 位置。支持绝对的像素值或者'20%'这样的相对值。

series-treemap.labelLayout. dx

number

标签在 x 方向上的像素偏移。可以和x一起使用。

series-treemap.labelLayout. dy

number

标签在 y 方向上的像素偏移。可以和y一起使用

series-treemap.labelLayout. rotate

number

标签旋转角度。

series-treemap.labelLayout. width

number

标签显示的宽度。可以配合overflow使用控制标签显示在固定宽度内

series-treemap.labelLayout. height

number

标签显示的高度。

series-treemap.labelLayout. align

string

标签水平对齐方式。可以设置'left', 'center', 'right'。

series-treemap.labelLayout. verticalAlign

string

标签垂直对齐方式。可以设置'top', 'middle', 'bottom'。

series-treemap.labelLayout. fontSize

number

The text size of the label.

series-treemap.labelLayout. draggable

boolean

标签是否可以允许用户通过拖拽二次调整位置。

series-treemap.labelLayout. labelLinePoints

Array

标签引导线三个点的位置。格式为：

[[x, y], [x, y], [x, y]]

在饼图中常用来微调已经计算好的引导线，其它情况一般不建议设置。

series-treemap. levels

Array

多层配置

treemap 中采用『三级配置』：

『每个节点』->『每个层级』->『每个系列』。

即我们可以对每个节点进行配置，也可以对树的每个层级进行配置，也可以 series 上设置全局配置。节点上的设置，优先级最高。

最常用的是『每个层级进行配置』，levels 配置项就是每个层级的配置。例如：

// Notice that in fact the data structure is not "tree", but is "forest".
// 注意，这个数据结构实际不是『树』而是『森林』
data: [
    {
        name: 'nodeA',
        children: [
            {name: 'nodeAA'},
            {name: 'nodeAB'},
        ]
    },
    {
        name: 'nodeB',
        children: [
            {name: 'nodeBA'}
        ]
    }
],
levels: [
    {...}, // 『森林』的顶层配置。即含有 'nodeA', 'nodeB' 的这层。
    {...}, // 下一层配置，即含有 'nodeAA', 'nodeAB', 'nodeBA' 的这层。
    {...}, // 再下一层配置。
    ...
]

视觉映射的规则

treemap中首要关注的是如何在视觉上较好得区分『不同层级』、『同层级中不同类别』。这需要合理得设置不同层级的『矩形颜色』、『边界粗细』、『边界颜色』甚至『矩形颜色饱和度』等。

参见这个例子，最顶层级用颜色区分，分成了『红』『绿』『蓝』等大块。每个颜色块中是下一个层级，使用颜色的饱和度来区分（参见 colorSaturation）。最外层的矩形边界是『白色』，下层级的矩形边界是当前区块颜色加上饱和度处理（参见 borderColorSaturation）。

treemap 是通过这样的规则来支持这种配置的：每个层级计算用户配置的 color、colorSaturation、borderColor、borderColorSaturation等视觉信息（在levels中配置）。如果子节点没有配置，则继承父的配置，否则使用自己的配置）。

这样，可以做到：父层级配置 color 列表，子层级配置 colorSaturation。父层级的每个节点会从 color 列表中得到一个颜色，子层级的节点会从 colorSaturation 中得到一个值，并且继承父节点得到的颜色，合成得到自己的最终颜色。

维度与『额外的视觉映射』

例子：每一个 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时的状态。

矩形边框（border）/缝隙（gap）设置如何避免混淆

如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。

borderWidth, gapWidth, borderColor 的解释

series-treemap.levels. visualDimension

number

treemap 中支持对数据其他维度进行视觉映射。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 visualDimension 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. visualMin 试一试

number

当前层级的最小 value 值。如果不设置则自动统计。

手动指定 visualMin、visualMax ，即手动控制了 visual mapping 的值域（当 colorMappingBy 为 'value' 时有意义）。

series-treemap.levels. visualMax 试一试

number

当前层级的最大 value 值。如果不设置则自动统计。

手动指定 visualMin、visualMax ，即手动控制了 visual mapping 的值域（当 colorMappingBy 为 'value' 时有意义）。

series-treemap.levels. color

Array

表示同一层级的节点的颜色选取列表（选择规则见 colorMappingBy）。默认为空时，选取系统color列表。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 color 属性可能在多处地方存在：

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. colorAlpha

Array

表示同一层级的节点的颜色透明度选取范围。

数值范围 0 ~ 1

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

关于视觉设置，详见 series-treemap.levels。

注：treemap中 colorAlpha 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. colorSaturation

number

表示同一层级的节点的颜色饱和度选取范围。

数值范围 0 ~ 1。

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

关于视觉设置，详见 series-treemap.levels。

注：treemap中 colorSaturation 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. colorMappingBy = 'index' 试一试

string

表示同一层级节点，在颜色列表中（参见 color 属性）选择时，按照什么来选择。可选值：

'value'：

将节点的值（即 series-treemap.data.value）映射到颜色列表中。

这样得到的颜色，反应了节点值的大小。

可以使用 visualDimension 属性来设置，用 data 中哪个纬度的值来映射。

'index'：

将节点的 index（序号）映射到颜色列表中。即同一层级中，第一个节点取颜色列表中第一个颜色，第二个节点取第二个。

这样得到的颜色，便于区分相邻节点。

'id'：

关于视觉设置，详见 series-treemap.levels。

注：treemap中 colorMappingBy 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. visibleMin = 10 试一试

number

如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。

如果不加这个限制，很小的节点会影响显示效果。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 visibleMin 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. childrenVisibleMin 试一试

number

如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。

这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。

关于视觉设置，详见 series-treemap.levels。

注：treemap中 childrenVisibleMin 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

series-treemap.levels. label

Object

label 描述了每个矩形中，文本标签的样式。

注：treemap中 label 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

所有属性

{ show , position , distance , rotate , offset , minMargin , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-treemap.levels. upperLabel

Object

upperLabel 用于显示矩形的父节点的标签。当 upperLabel.show 为 true 的时候，『显示父节点标签』功能开启。

同 series-treemap.label 一样，upperLabel 可以存在于 series-treemap 的根节点，或者 series-treemap.level 中，或者 series-treemap.data 的每个数据项中。

参见：

注：treemap中 label 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

所有属性

series-treemap.levels. itemStyle

Object

注：treemap中 itemStyle 属性可能在多处地方存在：

于 sereis-treemap 根下，表示本系列全局的统一设置。

于 series-treemap.levels 的每个数组元素中，表示树每个层级的统一设置。

于 series-treemap.data 的每个节点中，表示每个节点的特定设置。

所有属性

{ color , borderRadius , borderWidth , gapWidth , borderColor , borderColorSaturation , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , decal }

series-treemap.levels. emphasis

Object

高亮状态配置。

所有属性

{ disabled , label , labelLine , upperLabel , itemStyle }

series-treemap.levels. blur

Object

从 v5.0.0 开始支持

淡出状态配置。

所有属性

{ label , labelLine , upperLabel , itemStyle }

series-treemap.levels. select

Object

从 v5.0.0 开始支持

选中状态配置。

所有属性

{ disabled , label , labelLine , upperLabel , itemStyle }

series-treemap. data

Array

series-treemap.data 的数据格式是树状的，例如：

[ // 注意，最外层是一个数组，而非从某个根节点开始。
    {
        value: 1212,
        children: [
            {
                value: 2323,    // value字段的值，对应到面积大小。
                                // 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。
                                // 数组其他项可以用于额外的视觉映射，详情参见 series-treemap.levels。
                id: 'someid-1', // id 不是必须设置的。
                                // 但是如果想使用 API 来改变某个节点，需要用 id 来定位。
                name: 'description of this node', // 显示在矩形中的描述文字。
                children: [...],
                label: {        // 此节点特殊的 label 定义（如果需要的话）。
                    ...         // label的格式参见 series-treemap.label。
                },
                itemStyle: {    // 此节点特殊的 itemStyle 定义（如果需要的话）。
                    ...         // label的格式参见 series-treemap.itemStyle。
                }
            },
            {
                value: 4545,
                id: 'someid-2',
                name: 'description of this node',
                children: [
                    {
                        value: 5656,
                        id: 'someid-3',
                        name: 'description of this node',
                        children: [...]
                    },
                    ...
                ]
            }
        ]
    },
    {
        value: [23, 59, 12]
        // 如果没有children，可以不写
    },
    ...
]

所有属性

{ value , id , name , visualDimension , visualMin , visualMax , color , colorAlpha , colorSaturation , colorMappingBy , visibleMin , childrenVisibleMin , label , upperLabel , itemStyle , emphasis , blur , select , link , target , children , tooltip }

series-treemap. silent 试一试

boolean

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

series-treemap. animationDuration = 1500 试一试

numberFunction

初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：

animationDuration: function (idx) {
    // 越往后的数据时长越大
    return idx * 100;
}

series-treemap. animationEasing = quinticInOut 试一试

string

初始动画的缓动效果。不同的缓动效果可以参考缓动示例。

series-treemap. animationDelay

numberFunction

初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series-treemap. tooltip

Object

本系列特定的 tooltip 设定。

所有属性

{ position , formatter , valueFormatter , backgroundColor , borderColor , borderWidth , padding , textStyle , extraCssText }

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

代理配置管理_configured-agent

以下为本文档的中文说明该技能用于实现Claude Code插件的用户可配置设置，使用.claude/plugin-name.local.md模式来存储插件特定的配置信息。主要功能是允许插件在项目目录中存储用户可配置的设置和状态，使用YAML前置元数据作为结构化配置内容。使用场景包括：当用户询问"插件设置"、“存储插件配置”、“用户可配置插件”、".local.md文件"等概念时；需要为每个项目单独

AI编程社区

用 AI 导出鸭高效处理：Claude 的表格怎么导出到 word，多终端无损转换表格内容

AI编程社区

大模型选型实战指南：Claude vs GPT-4 vs 开源模型的场景化对比与迁移策略

2026年中，可供独立开发者选择的大模型已经非常多。Claude系列（Haiku/Sonnet/Opus）、GPT系列（4o/4-Turbo/o-mini）、Gemini系列、以及开源模型（Llama 3/Mistral/Qwen），各有优劣。但"哪个模型最好"是一个错误的问题。。不同模型在不同任务类型上的表现差异很大。Claude擅长"指令遵循"和"长文档分析"；GPT-4o擅长"多模态理解"和