下钻矩形树图
下钻矩形树图
下钻矩形树图是一种用于展示层级数据（树状数据）的可视化形式。它通过嵌套的矩形块来表示数据的层级结构，并支持用户通过点击节点下钻到更深层级，查看更详细的数据。矩形树图的核心特点是通过面积大小突出显示重要节点，适合展示具有层次结构的大规模数据。
属性
基础
组件标题： 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+
组件尺寸： 组件的宽度和高度，单位为
px。- 锁定纵横比：：单击
切换是否锁定纵横比，锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
- 锁定纵横比：：单击
组件位置： 组件在大屏中的位置，包括组件的横坐标和纵坐标，单位为
px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。隐藏时解析： 默认组件设置隐藏后组件不解析，组件配置的数据资源及交互事件，节点编程事件都不会执行。当开启隐藏时解析时，上述功能将执行。
提示
隐藏时解析常用于页面中不需要展示组件但要获取相关数据。
- 系列颜色： 面积颜色。
系列
系列名称： 设置系列的名称，用于提示框的显示。在用户悬停或点击节点时，提示框中会显示该系列名称。
点击节点行为： 设置点击节点后的行为，支持缩放到节点功能。开启后，点击节点会缩放到该节点，突出显示该节点及其子节点。
展开层级： 设置初始展示的层级深度，更深层级的节点会被隐藏。配置后，开启下钻功能，用户可以通过点击节点查看更深层级的节点。
下钻时提示符： 设置节点可下钻时的提示符。提示用户当前节点可以下钻查看更深层级的节点。
平移缩放： 设置是否开启拖拽漫游（移动和缩放）功能。
最小显示面积： 设置节点显示的最小面积。如果某个节点的矩形面积小于该值，则该节点不显示。
最小显示子节点： 设置显示子节点的最小面积。如果某个节点的矩形面积小于该值，则不显示该节点的子节点。
颜色透明度： 设置节点颜色的默认透明度范围。值范围 0 ~ 1，0 表示完全透明，1 表示完全不透明。
颜色饱和度： 设置节点颜色的默认饱和度范围。值范围 0 ~ 1，0 表示灰度，1 表示完全饱和。
选择模式： 设置图表的交互选择模式，可选
不可选、单选、多选。
视区大小
左边距： 绘制区域与组件左边框的距离，可选
绝对值、百分比。值越大距离越大，绘制区域越小，图形左边的留白越多。右边距： 绘制区域与组件右边框的距离，可选
绝对值、百分比。值越大距离越大，绘制区域越小，图形右边的留白越多。上边距： 绘制区域与组件上边框的距离，可选
绝对值、百分比。值越大距离越大，绘制区域越小，图形顶部的留白越多。下边距： 绘制区域与组件下边框的距离，可选
绝对值、百分比。值越大距离越大，绘制区域越小，图形底部的留白越多。宽度： 设置组件的宽度，可选
绝对值、百分比。高度： 设置组件的高度，可选
绝对值、百分比。
普通状态
文本标签： 设置图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示： 设置是否显示图形上的文本标签，其余配置均在显示标签时生效。
内容格式器： 设置文本标签显示内容。支持
字符串模板和回调函数两种形式。字符串模板可直接使用enter按键进行换行，回调函数返回的字符串可以用\n换行，支持从HETU内置函数中获取变量值。2024.5+打开编辑框： 点击输入框中
打开编辑器，可在编辑器中修改内容。字符串模板变量：
{a}: 系列名。{b}: 数据名。{c}: 数据值。{d}: 百分比。
示例：
{b}: {d}回调函数: 可直接输入函数体，系统提供了两个参数
data和HETU。- 参数
data是内容格式器需要的单个数据资源。格式如下：
- 参数
{ // 数据名，类目名 name: string, // 传入的原始数据项 data: Object, // 传入的数据值 value: number|Array, }示例：
return data.name;- 参数
HETU是系统内置函数。可获取变量池中的变量值。
位置： 设置文本标签上值的位置。可选
上、左、右、下、内左、内右、内上、内下、内左上、内左下、内右上、内右下。文字距离： 设置文本标签与图形之间距离。
文字旋转： 设置文本标签旋转指定角度。值为 -90 度到 90 度，正值是逆时针。
文字偏移： 设置文本标签水平和垂直偏移量，第一个输入框为水平偏移量，第二个输入框为垂直偏移量。
水平偏移： 设置文本标签的水平偏移，值为正时向右偏移，值为负时向左偏移。
垂直偏移： 设置文本标签的垂直偏移，值为正时向下偏移，值为负时向上偏移。
水平对齐： 设置标签在水平方向上的对齐方式，可选
左、中和右。垂直对齐： 设置标签在垂直方向上的对齐方式，可选
上、中和下。宽高： 设置文本标签的宽度与高度，第一个输入框为文本标签的宽度，第二个输入框为文本标签的高度。
超出宽度： 设置文本内容超出设置的宽度展现方式，配置文本宽度时生效，可选
不处理、截断、换行和强制单词换行。不处理： 设置文本内容超出配置宽度时不做任何处理。
截断： 设置文本内容超出配置宽度时截断超出的内容。
换行： 设置文本内容超出配置宽度时文本自动换行。
强制单词换行： 设置文本内容超出配置宽度时文本自动换行，在英语等拉丁文中会强制单词内换行 。
末尾显示文本： 设置文本截断时末尾显示的文本，默认值为
···。仅在超出宽度设为截断时生效。字体颜色： 设置文本标签字体颜色。默认标签颜色与图形颜色一致。
字体大小： 设置文本标签字体大小，单位为
px。字体粗细： 设置文本标签字体粗细，可选
普通、加粗和更细。默认为普通。字体： 设置文本标签字体样式，可选系统内置字体和自定义添加字体。
图形样式： 该系列下图形的颜色、边框设置，支持颜色填充和渐变填充两种方式。
渐变色： 点击
开启图形渐变色配置。渐变色方向： 设置图形渐变色的方向，可为
正下到正上、左下到右上和右上到左下。正下到正上： 设置的两个颜色从上至下进行渐变，最上方显示第一个颜色，最下方显示第二个颜色。
左下到右上： 设置的两个颜色从左下角至右上角进行渐变，左下角显示第二个颜色，右上角显示第一个颜色。
右上到左下： 设置的两个颜色从右上角至左下角进行渐变，左下角显示第一个颜色，右上角显示第二个颜色。
渐变色范围： 设置图形渐变色的颜色范围。
初始颜色： 点击第一个颜色选择器
设置渐变色的第一个颜色。渐变范围： 拖动
中滑块设置渐变范围，两侧滑块均可拖动。第一个滑块越靠右，则第一个颜色占比越高。第二个滑块越靠左，则第二个颜色越高。结束颜色： 点击第一个颜色选择器
设置渐变色的第二个颜色。
颜色： 设置图形的颜色，仅在
渐变色关闭时生效。描边颜色： 设置图形描边的颜色。
描边线宽： 设置图形描边线的宽度。值越大，描边越明显；值越小，描边越细腻。
描边类型： 设置图形描边线的类型，可选
实线、虚线、点线。圆角： 设置图形四角的圆角半径。
阴影属性：
点击
设置柱背景阴影颜色。水平： 阴影的水平偏移量。值为0时阴影在图形下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。
垂直： 阴影的垂直偏移量。值为0时阴影在图形下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。
模糊： 阴影的模糊程度。值为0时阴影没有模糊效果，值越大阴影效果越明显。
- 父节点标签： 其属性配置与文本标签相同。
高亮状态： 鼠标放到面积上时高亮的样式。
关闭高亮状态： 关闭高亮状态。
聚焦效果： 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。
其余属性配置与普通状态相同。
选中状态： 选中状态下面积的样式，选择模式为单选或多选时生效。属性配置与普通状态相同。
面包屑： 能够显示当前节点的路径。
显示： 设置是否显示面包屑。
左边距： 设置面包屑离容器左侧的距离。控制面包屑的水平位置。
右边距： 设置面包屑离容器右侧的距离。控制面包屑的水平位置。
上边距： 设置面包屑离容器上侧的距离。控制面包屑的垂直位置。
下边距： 设置面包屑离容器下侧的距离。控制面包屑的垂直位置。
高度： 设置面包屑的高度。控制面包屑的显示区域大小。
最小宽度： 设置面包屑的最小宽度。当面包屑没有内容时，保持一个最小宽度，避免布局错乱。
普通状态
图形样式
颜色： 设置面包屑图形的填充颜色。
描边颜色： 设置面包屑图形的描边颜色。
描边线宽： 设置面包屑图形的描边宽度。控制面包屑边框的粗细。
描边类型： 设置面包屑图形的描边类型，可选
实线、虚线、点线。阴影属性： 设置面包屑图形的阴影模糊效果。
文本样式
字体颜色： 设置文本标签字体颜色。默认标签颜色与图形颜色一致。
字体大小： 设置文本标签字体大小，单位为
px。字体粗细： 设置文本标签字体粗细，可选
普通、加粗和更细。默认为普通。字体： 设置文本标签字体样式，可选系统内置字体和自定义添加字体。
高亮状态： 属性配置与普通状态相同。
层级配置
指定层级： 设置样式生效的层级。
最小显示面积： 设置节点显示的最小面积。如果某个节点的矩形面积小于该值，则该节点不显示。
最小显示子节点： 设置显示子节点的最小面积。如果某个节点的矩形面积小于该值，则不显示该节点的子节点。
层级颜色： 设置同一层级节点的颜色列表。为同一层级的节点分配不同的颜色，便于区分。
颜色透明度： 设置节点颜色的默认透明度范围。值范围 0 ~ 1，0 表示完全透明，1 表示完全不透明。
颜色饱和度： 设置节点颜色的默认饱和度范围。值范围 0 ~ 1，0 表示灰度，1 表示完全饱和。
普通状态： 其属性配置与普通状态相同。
高亮状态： 其属性配置与高亮状态相同。
选中状态： 其属性配置与选中状态相同。
初始动画： 图表初始化渲染的动画配置。
开启动画： 图表渲染时是否启用动画。开启后图表初始化时展示图形具有动画效果。在性能较弱的终端机器查看大屏页面时建议关闭组件动画以节约性能开销。
动画时长(ms)： 设置动画的时长。值越大动画持续时间越长。
缓动效果： 动画的缓动效果。
视觉映射
视觉映射可以设置指定数据维度和指定系列的图形展示颜色和图形类型。
当视觉映射为空时点击
添加视觉映射。若已存在视觉映射点击
添加新的视觉映射。显示控制器： 是否显示控制器。开启后展示视觉映射控制器，默认为不开启状态。无论是否开启视觉映射配置均生效。
类型： 视觉映射控制器的类型。可选
连续型和分段型。连续型： 任意两个数据点之间可以细分出无限多个数值。
分段型： 任意两个数据点之间的个数是有限的。
指定数据维度： 指定用数据的哪个维度，值为维度的索引值。默认取 data 中最后一个维度。
指定系列： 指定取哪个系列的数据，值为系列的索引值。默认取所有系列。
最小值： 指定视觉映射生效的最小值，用户必须进行设置。
最大值： 指定视觉映射生效的最大值，用户必须进行设置。默认值为 200。
视觉元素设置
视觉颜色： 设置映射区域内组件图形的颜色，可添加多个颜色。颜色数量大于 1 时，以添加的颜色作为基准，形成一种渐变的色带，图形根据数据展示色带上的颜色。
图形类型： 指定数据维度、系列所展示的散点图形类型。仅在
散点图中生效。图形大小范围： 根据数据大小控制指定数据维度、系列所展示的散点图形的大小。仅在
散点图中生效。
控制器设置
颜色： 设置映射控制器的颜色，可添加多个颜色。颜色数量大于1时，以添加的颜色作为基准，形成一种渐变的色带，图形根据数据展示色带上的颜色。
排列方式： 控制器的排列方式，可选
水平和垂直。水平： 视觉映射控制器水平方向展示。
垂直： 视觉映射控制器垂直方向展示。
水平对齐： 在水平方向上改变控制器的位置。可通过选择
左、中、右调整控制器的位置，也通过数值和百分比自定义其移动的距离。垂直对齐： 在垂直方向上改变控制器的位置。可通过选择
上、中、下调整控制器的位置，也通过数值和百分比自定义其移动的距离。两端文字： 控制器两端的文本。第一个输入框为控制器初端显示文本，第二个输入框为控制器末端显示文本。
文字距主体： 控制器与文字之间的距离。控制器类型为
连续型时，为两端文字与控制器之间的距离。分段型时为分段标签与控制器之间的距离。值为正数，值越大距离越远。小数精度： 数据展示保留小数位数，数据精度不够时用0补位。
反转控件： 将控制器反转，对应的两端文字也进行翻转。
鼠标联动高亮： 当鼠标悬浮在组件上时，鼠标位置对应的数值在图标中对应的图形元素会高亮。
图形置于文字： 控制器图形置于文字左边或右边。默认为左边。
图形宽度： 控制器图形的宽度。值为正数，值越大图形越宽。
图形高度： 控制器图形的高度。值为正数，值越大图形越高。
文字信息：
字体颜色： 控制器文字字体的颜色。
字体大小： 控制器文字字体的大小。值为正数，值越大字体越大。
字体粗细： 控制器文字字体的粗细，可选
普通、加粗和更细。默认为普通。字体： 选择控制器文字的字体，可选系统内置字体和自定义字体。
手柄设置： 仅在类型为
连续型时生效。是否拖动： 是否展示控制器手柄，开启后可以拖拽调整选中的范围。默认为开启状态。
拖拽实时更新： 手柄拖拽时组件是否根据选中范围的数据实时更新。
手柄图形： 控制器手柄的样式，可选
圆、矩形和三角形。默认为圆角矩形。手柄大小： 控制器手柄的大小。值为正数，值越大手柄越大。
描边属性： 可调整手柄其描边的颜色、描边样式及宽度。
描边颜色： 手柄描边颜色。描边宽度大于 0 时生效。
描边样式： 手柄描边样式，可选
实线、点状线和虚线。默认为实线。描边宽度： 手柄描边宽度。值为正数，值越大描边越宽。
阴影属性： 自定义描边在垂直方向和水平方向上的阴影，并定义阴影颜色，同时可以设置描边的模糊效果。
水平： 阴影的水平偏移量。值为 0 时阴影在手柄下方，值大于 0 时阴影向右侧偏移，值小于 0 时阴影向左侧偏移。
垂直： 阴影的垂直偏移量。值为 0 时阴影在手柄下方，值大于 0 时阴影向下方偏移，值小于 0 时阴影向下方偏移。
模糊： 阴影的模糊程度。值为 0 时阴影没有模糊效果，值越大阴影效果越明显。
指示器设置： 指示器在鼠标移到组件上，或者在移到系列图形上联动高亮的时候出现。仅在类型为
连续型时生效。指示器图形： 指示器的形状，可选
圆、矩形和三角形。默认为圆形。指示器大小： 指示器的大小。值为正数，值越大指示器越大。
描边属性： 可调整指示器其描边的颜色、形状及大小。
描边颜色： 指示器描边颜色。描边宽度大于 0 时生效。
描边样式： 指示器描边样式，可选
实线、点状线和虚线。默认为实线。描边宽度： 指示器描边宽度。值为正数，值越大描边越宽。
阴影属性： 自定义指示器在垂直方向和水平方向上的阴影，并定义阴影颜色，同时可以设置描边的模糊效果。
水平： 阴影的水平偏移量。值为 0 时阴影在指示器下方，值大于 0 时阴影向右侧偏移，值小于 0 时阴影向左侧偏移。
垂直： 阴影的垂直偏移量。值为 0 时阴影在指示器下方，值大于 0 时阴影向下方偏移，值小于 0 时阴影向下方偏移。
模糊： 阴影的模糊程度。值为 0 时阴影没有模糊效果，值越大阴影效果越明显。
分段信息： 仅在类型为
分段型时生效。自动分段： 是否开启自动分段。默认为开启状态。连续数据，会自动平均切分为 5 段。取值的范围通过
最小值和最大值指定。添加分段： 点击
添加分段配置，仅在关闭自动分段时生效。分段区间： 设置当前分段的区间。第一个输入框为区间开始值，第二个输入框为区间结束值。未设置时为全部数据。
分段标签： 分段图形的文字标签，其文字样式在文本信息中设置。
分段指示器设置： 仅在类型为
分段型时生效。显示文本： 是否显示每个分段的文本标签。默认为开启状态。
图元间距： 每两个分段图形之间的间隔，单位为 px。值为正数，值越大间隔越大。
默认图形： 分段信息展示的图形，可选
圆、矩形和三角形。默认为圆角矩形。分割段数： 分段指示器分割的段数。默认分割为 5 段。仅关闭自动分段时生效。
标题
标题通常对图表进行概括性说明，包含主标题和副标题。
显示标题： 组件是否显示标题。默认为不显示。
内容
标题
主： 可设置主标题展示的内容。
副： 可设置副标题展示的内容。
超链接： 可对组件标题进行链接配置，实现页面跳转。
主： 配置主标题跳转链接，以打开新窗口的形式进行跳转。仅在开启标题且主标题内容不为空时可用。
副： 配置副标题跳转链接，以打开新窗口的形式进行跳转。仅在开启标题且副标题内容不为空时可用。
位置
水平对齐： 主副标题在水平方向的位置，可选
对齐、绝对值和百分比。对齐： 主副标题在水平方向对齐方式，可选
左、中和右。绝对值： 主副标题与组件左上角的水平间距，单位为
px。百分比： 主副标题与组件左上角的水平间距，单位为
%。
垂直对齐： 主副标题在垂直方向的位置，可选
对齐、绝对值和百分比。对齐： 主副标题在水平方向对齐方式，可选
上、中和下。绝对值： 主副标题与组件左上角的垂直间距，单位为
px。百分比： 主副标题与组件左上角的垂直间距，单位为
%。
外观
内边距： 主副标题距组件上下左右的边距。值越大边距越大。
主副间隔： 主标题与副标题之间的间隔。值越大间隔越大。
主标题文本样式
字体颜色： 可设置主标题文字颜色。默认颜色跟随主题变化。
字体大小： 主标题文字大小。值为正数，值越大字体越大。单位为
px。字体粗细： 主标题字体粗细，可选
普通、加粗和更细。字体： 主标题字体样式，可选系统内置字体和自定义字体。
副标题文本样式
字体颜色： 可设置副标题文字颜色。默认颜色跟随主题变化。
字体大小： 副标题字体大小。值为正数，值越大字体越大。单位为
px。字体粗细： 副标题字体粗细，可选
普通、加粗和更细。字体： 副标题字体样式，可选系统内置字体和自定义字体。
图例
图例可以通过颜色、图标等形式标识图表中的不同数据系列，使用户能够快速识别每个系列对应的数据。
用户可以通过点击图例来显示或隐藏对应的数据系列，方便动态调整图表展示的内容。
显示图例： 组件是否显示图例。
选择类型： 设置图例的类型，可选
普通图例和分页图例。
提示：
设置分页图例时，不一定出现翻页控件。翻页图例出现的条件是，当前图例区域不足以容纳所有图例，一种是图例较多时，一种是当前图例区域较小时，区域大小设置在 区域/位置。
选中模式： 设置图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。可选
不可选、单选和多选。图标： 设置图例展示的图标样式，可选
圆、矩形、圆矩形、三角形、菱形和取消图标。图例间距： 设置每两个图例之间的间距。值越大图例间隔越远。
图例宽度： 设置图例图形的宽度。值越大图形越宽。
图例高度： 设置图例图形的高度。值越大图形越高。
内容格式器： 用来格式化图例文本，支持字符串模板和回调函数两种形式。字符串模板可直接使用
enter按键进行换行，回调函数返回的字符串可以用\n换行。支持从HETU内置函数中获取变量值。2024.5+字符串模板：
{name}回调函数： 可直接输入函数体，系统提供了两个参数
data和HETU。return data;
区域/位置
排列方式： 设置图例列表的布局朝向，可选
水平和垂直。水平： 图例从左至右依次排开。
垂直： 图例从上至下依次排开。
区域宽度： 设置图例区域的宽度，仅在排列方式选择水平排列时生效。
区域高度： 设置图例区域的高度，仅在排列方式选择垂直排列时生效。
水平位置： 图例在水平方向的位置，可选
对齐、绝对值和百分比。对齐： 图例在水平方向对齐方式，可选
左、中和右。绝对值： 图例与组件左上角的水平间距，单位为
px。百分比： 图例与组件左上角的水平间距，单位为
%。
垂直位置： 图例在垂直方向的位置，可选
对齐、绝对值和百分比。对齐： 图例在水平方向对齐方式，可选
上、中和下。绝对值： 图例与组件左上角的垂直间距，单位为
px。百分比： 图例与组件左上角的垂直间距，单位为
%。
文字样式
字体颜色： 设置图例的字体颜色。默认颜色跟随主题。
字体大小： 设置图例字体的大小。值越大，图例字体越大。
字体粗细： 设置图例字体的粗细，可选
普通、加粗和更细。字体： 设置图例字体的样式，可选系统内置字体和自定义字体。
背景块设置 设置图例背景区域的样式
内边距： 设置图例在背景区域中上下左右的间距。值越大，间距越大。
背景色： 设置背景区域的颜色。默认无颜色。
边框色： 设置背景区域的边框颜色。
边框线宽： 设置背景区域边框线的宽度。值越大，边框越宽。
圆角半径： 设置背景区域四个角的圆角样式。
阴影颜色： 设置背景区域的阴影颜色。
阴影大小： 设置背景区域的阴影模糊效果。值为0时阴影没有模糊效果，值越大阴影效果越明显。
X 轴偏移： 阴影的水平偏移量。值为0时阴影在背景区域下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。
Y 轴偏移： 阴影的垂直偏移量。值为0时阴影在背景区域下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。
全选/反选功能设置
开启： 是否开启控件。开启时显示全选/反选控件，默认不开启
选择器位置： 设置全选/反选按钮在图例区域的位置，可选
起始和结束。选择起始时按钮位于图例开始位置，选择结束时按钮位于图例尾端。按钮间距： 全选与反选两个按钮之间的距离。值越大两个按钮之间距离越大。
据图例： 全选/反选按钮与图例之间的距离。值越大按钮与图例之间距离越大。
文本标签：
内边距： 按钮文字在控件内上下左右四个边框的距离。值越大距离越高。
背景色： 设置控件的背景色。默认无颜色。
边框色： 设置控件的边框颜色。
边框宽度： 设置控件的边框宽度。值越大边框越宽，值为0时不显示边框。
圆角半径： 设置控件四个方向的圆角。值越大圆角越明显。
阴影颜色： 设置控件的阴影颜色。
阴影大小： 设置控件的阴影模糊效果。值为0时阴影没有模糊效果，值越大阴影效果越明显。
X 轴偏移： 阴影的水平偏移量。值为0时阴影在控件下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。
Y 轴偏移： 阴影的垂直偏移量。值为0时阴影在控件下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。
高亮文本标签： 属性设置同 文本标签
分页设置 仅在选择类型为
分页图例时可配置。按钮间距： 上页与下页两个按钮之间的距离。值越大两个按钮之间距离越大。
距图例： 翻页按钮与图例之间的距离。值越大按钮与图例之间距离越大。
位置： 翻页按钮在图例区域的位置，可选
起始和结束。选择起始时按钮位于图例开始位置，选择结束时按钮位于图例尾端。翻页按钮与全选/反选按钮位置都设为起始时，全选/反选按钮在前。翻页按钮与全选/反选按钮位置都设为结束时，全选/反选按钮在后。按钮颜色： 设置翻页按钮的颜色。
禁按颜色： 设置翻页按钮禁止点击时的颜色。
按钮大小： 设置翻页按钮的大小。值越大按钮越大。
字体颜色： 设置分页字体颜色。
字体大小： 设置分页字体大小。值越大字体越大。
字体粗细： 设置分页字体粗细，可选
普通、加粗和更细。字体： 设置分页字体的样式，可选系统内置字体和自定义字体。
提示框
适用于在用户与图表交互时显示详细的数据信息。
显示： 组件是否显示提示框。
显示类型： 提示框内展示内容的类型，可选
组件或模版。2024.3+组件： 选择需要在提示框内展示的组件。禁止选择自身作为提示组件，不允许选在自身的父组件作为提示组件。仅在显示类型为
组件时可配置。2024.3+模板： 可在模版输入框中输入提示框中内容。支持字符串模板和回调函数两种形式；若当前组件不是图表组件或者地图组件，模版输入框内可以输入html标签。仅在显示类型为
模版时可配置。- 字符串模板
模板变量有
{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：折线（区域）图、柱状（条形）图、K 线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无）散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无）地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）回调函数
return data;
触发方式： 设置提示框被触发的方式，可选
悬停、点击和悬停或点击。2024.3+悬停： 鼠标指针移动到组件或组件图形上时展示提示框。
点击： 鼠标左键点击组件或组件图形上时展示提示框。
悬停或点击： 悬停或点击二者都可以触发提示框展示。
显示位置： 选择提示框的展示位置，可选
内部中心、上边、左边、下边和右边。2024.3+触发点： 提示框显示的触发位置，可选
坐标轴或数据项触发。仅在当前组件为图表组件或者地图组件时可设置。坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
数据项： 数据项图形触发，主要在
散点图、饼图等无类目轴的图表中使用。
多系列排序： 用来选择系列在提示框内的展示顺序，可选
根据系列升序、根据系列降序、根据数据升序、根据数据降序。仅在当前组件为图表组件或者地图组件且显示类型为模版时设置。外观
背景颜色： 设置提示框的背景颜色。
边框颜色： 设置提示框的边框颜色。
边框宽度： 设置提示框的边框宽度。值越大边框越宽。
内边距： 设置提示框上下左右四边与内容之间的距离。值越大距离越大。
文本样式 仅在显示类型为
模版时可设置。字体颜色： 设置提示框显示内容的字体颜色。
字体大小： 设置提示框显示内容的字体大小。
字体粗细： 设置提示框显示内容的字体粗细，可选
普通、加粗、更细。字体： 设置提示框显示内容的样式，可选系统内置字体和自定义字体
工具栏
为用户提供了一系列便捷的工具，用于与图表进行交互或对图表进行操作。
显示： 组件是否显示功能按钮。
功能按钮
保存为图片按钮： 将当前图表保存为图片。仅在开启工具栏显示且开启当前按钮显示时生效。
还原按钮： 恢复图表的初始状态。仅在开启工具栏显示且开启当前按钮显示时生效。
数据视图按钮： 以表格形式查看图表的数据。仅在开启工具栏显示且开启当前按钮显示时生效。
位置朝向
排列方式： 功能按钮的布局朝向，可选
水平、垂直。水平对齐： 功能按钮在水平方向的位置，可选
对齐、绝对值和百分比。对齐： 功能按钮在水平方向对齐方式，可选
左、中和右。绝对值： 功能按钮与组件左上角的水平间距，单位为
px。百分比： 功能按钮与组件左上角的水平间距，单位为
%。
垂直对齐： 功能按钮在垂直方向的位置，可选
对齐、绝对值和百分比。对齐： 功能按钮在水平方向对齐方式，可选
上、中和下。绝对值： 功能按钮与组件左上角的垂直间距，单位为
px。百分比： 功能按钮与组件左上角的垂直间距，单位为
%。
图表尺寸
图标大小： 功能按钮的大小。值越大，按钮图标越大。
间隔： 功能按钮之间的距离。值越大，按钮之间的距离越大。
数据
静态数据
上图中的示例JSON代码如下：
[
{
"target": "0",
"source": "",
"name": "区域",
"value": 2000
},
{
"target": "1",
"source": "0",
"name": "湖南大区",
"value": 400
},
{
"target": "2",
"source": "0",
"name": "四川大区",
"value": 200
},
{
"target": "3",
"source": "0",
"name": "云南大区",
"value": 100
},
{
"target": "4",
"source": "0",
"name": "广东大区",
"value": 300
},
{
"target": "5",
"source": "0",
"name": "广西大区",
"value": 200
},
{
"target": "6",
"source": "0",
"name": "江西大区",
"value": 200
},
{
"target": "7",
"source": "0",
"name": "福建大区",
"value": 300
},
{
"target": "8",
"source": "0",
"name": "河南大区",
"value": 300
},
{
"target": "9",
"source": "0",
"name": "河北大区",
"value": 150
},
{
"target": "10",
"source": "0",
"name": "贵州大区",
"value": 150
},
{
"target": "11",
"source": "1",
"name": "长沙",
"value": 150
},
{
"target": "12",
"source": "1",
"name": "常德",
"value": 200
},
{
"target": "13",
"source": "1",
"name": "湘潭",
"value": 90
},
{
"target": "14",
"source": "1",
"name": "株洲",
"value": 30
},
{
"target": "15",
"source": "1",
"name": "怀化",
"value": 20
},
{
"target": "16",
"source": "2",
"name": "成都",
"value": 150
},
{
"target": "17",
"source": "2",
"name": "德阳",
"value": 200
},
{
"target": "18",
"source": "2",
"name": "广安",
"value": 90
},
{
"target": "19",
"source": "2",
"name": "达州",
"value": 30
},
{
"target": "20",
"source": "2",
"name": "绵阳",
"value": 20
},
{
"target": "21",
"source": "3",
"name": "昆明",
"value": 150
},
{
"target": "22",
"source": "3",
"name": "曲靖",
"value": 200
},
{
"target": "23",
"source": "3",
"name": "玉溪",
"value": 90
},
{
"target": "24",
"source": "3",
"name": "大理",
"value": 30
},
{
"target": "25",
"source": "3",
"name": "腾冲",
"value": 20
},
{
"target": "26",
"source": "4",
"name": "广州",
"value": 150
},
{
"target": "27",
"source": "4",
"name": "深圳",
"value": 200
},
{
"target": "28",
"source": "4",
"name": "珠海",
"value": 90
},
{
"target": "29",
"source": "4",
"name": "东莞",
"value": 30
},
{
"target": "30",
"source": "4",
"name": "惠州",
"value": 20
},
{
"target": "31",
"source": "5",
"name": "武汉",
"value": 150
},
{
"target": "32",
"source": "5",
"name": "咸宁",
"value": 200
},
{
"target": "33",
"source": "5",
"name": "鄂州",
"value": 90
},
{
"target": "34",
"source": "5",
"name": "荆州",
"value": 30
},
{
"target": "35",
"source": "5",
"name": "宜昌",
"value": 20
},
{
"target": "36",
"source": "6",
"name": "南昌",
"value": 150
},
{
"target": "37",
"source": "6",
"name": "九江",
"value": 200
},
{
"target": "38",
"source": "6",
"name": "抚州",
"value": 90
},
{
"target": "39",
"source": "6",
"name": "上饶",
"value": 30
},
{
"target": "40",
"source": "6",
"name": "宜春",
"value": 20
},
{
"target": "41",
"source": "7",
"name": "福州",
"value": 150
},
{
"target": "42",
"source": "7",
"name": "泉州",
"value": 200
},
{
"target": "43",
"source": "7",
"name": "厦门",
"value": 90
},
{
"target": "44",
"source": "7",
"name": "漳州",
"value": 30
},
{
"target": "45",
"source": "7",
"name": "莆田",
"value": 20
},
{
"target": "46",
"source": "8",
"name": "郑州",
"value": 150
},
{
"target": "47",
"source": "8",
"name": "开封",
"value": 200
},
{
"target": "48",
"source": "8",
"name": "洛阳",
"value": 90
},
{
"target": "49",
"source": "8",
"name": "平顶山",
"value": 30
},
{
"target": "50",
"source": "8",
"name": "安阳",
"value": 20
},
{
"target": "51",
"source": "9",
"name": "石家庄",
"value": 150
},
{
"target": "52",
"source": "9",
"name": "张家口",
"value": 200
},
{
"target": "53",
"source": "9",
"name": "唐山",
"value": 90
},
{
"target": "54",
"source": "9",
"name": "秦皇岛",
"value": 30
},
{
"target": "55",
"source": "9",
"name": "邯郸",
"value": 20
},
{
"target": "56",
"source": "10",
"name": "贵阳",
"value": 150
},
{
"target": "57",
"source": "10",
"name": "兴义",
"value": 200
},
{
"target": "58",
"source": "10",
"name": "六盘水",
"value": 90
},
{
"target": "59",
"source": "10",
"name": "遵义",
"value": 30
},
{
"target": "60",
"source": "10",
"name": "安顺",
"value": 20
}
]源节点
目标节点
节点数据
name： 面积的名称。
value： 面积的大小。
数据资源
选择数据资源： 切换到
数据资源标签，点击
可从数据管理或API中选择相应的数据资源作为组件的数据支撑。还原默认数据： 点击①处
刷新数据资源。搜索数据中的字段： 当列表中字段过多时，可通过搜索框搜索列表中的字段。
刷新字段列表： 点击②处
刷新字段列表字段类型
字符型： 标识符为
A。数值型： 标识符为
#。
交互
面积单击事件
勾选启用，开启组件交互功能。当单击面积时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。
面积悬停事件
勾选启用，开启组件交互功能。当鼠标悬停到上面积时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。
面积移出事件
勾选启用，开启组件交互功能。当鼠标移出面积时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。
数据响应
旭日图支持数据响应。
节点编程
事件
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
面积单击事件： 面积单击触发事件。
- 抛出的参数： 面积所携带的数据。
面积悬停事件： 鼠标在面积悬停时触发事件。
- 抛出的参数： 面积所携带的数据。
面积移出事件： 鼠标从面积移出时触发事件。
- 抛出的参数： 面积所携带的数据。
动作
导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。