# 面积图4.2+
面积图是通过块的方式展示各数据的大小。
# 属性
# 基础
基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 面积颜色。
# 系列
系列名称： 用于提示框的显示。
点击节点行为： 开启后，点击节点后缩放到节点。
展开层级： 表示『展示几层』，层次更深的节点则被隐藏起来。配置该属性后，表示开启下钻功能，点击则可下钻看到层次更深的节点。
下钻时提示符： 当节点可以下钻时的提示符。只能是字符。
平移缩放： 开启拖拽漫游（移动和缩放）。
最小显示面积： 如果某个节点的矩形的面积，小于这个数值（单位：px 平方），这个节点就不显示。
最小显示子节点： 如果某个节点的矩形面积，小于这个数值（单位：px 平方），则不显示这个节点的子节点。
这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。
颜色透明度： 本系列默认的颜色透明度选取范围。
数值范围 0 ~ 1。
颜色饱和度： 本系列默认的节点的颜色饱和度选取范围。
数值范围 0 ~ 1。
视区大小
左边距： 组件离容器左侧的距离。
右边距： 组件离容器右侧的距离。
上边距： 组件离容器上侧的距离。
下边距： 组件离容器下侧的距离。
宽度： 组件的宽度。
高度： 组件的高度。
普通状态：
文本标签
显示： 是否显示文本。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。{@xxx}：数据中名为xxx的维度的值，如{@product}表示名为 'product' 的维度的值。{@[n]}：数据中维度 n 的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
例如：
{b}: {c}- 回调函数： 示例：
return data.value[1];参数
data是内容格式器需要的单个数据参数。格式如下：{ // 传入的原始数据项 data: { name: string, // 系列数据 value: Array, // 源节点 source: string|number, // 目标节点 target: string|number }, // 数据在传入的data数组中的index dataIndex: number|Array, // 系列在传入的option,series中的index seriesIndex: number }位置： 文本的位置。
文字距离： 文本距节点的位置。
文字旋转： 文本标签字体的旋转角度。也可以设置径向旋转和切向旋转。
文字偏移： 对文本进行偏移。
水平对齐： 文字对齐方式。
垂直对齐： 文字垂直对齐方式。
宽高： 文本显示宽度和高度。
超出宽度： 文字超出宽度是否截断或者换行。配置宽度时有效。
字体颜色： 文本标签字体颜色。
字体大小： 文本标签字体大小。
字体粗细： 文本标签字体粗细。
字体： 文本标签字体样式。
图形样式
颜色： 图形颜色。
描边颜色： 图形描边颜色。
描边线宽： 图形描边宽度。
描边类型： 图形描边类型。
圆角： 面积的内外圆角半径。
子节点间隔： 矩形内部子矩形（子节点）的间隔距离。
阴影属性： 在垂直方向和水平方向上的阴影，同时可以设置模糊效果。
父节点标签
其属性配置与文本标签相同。
高亮状态： 鼠标放到面积上时高亮的样式。
关闭高亮状态： 关闭高亮状态。
聚焦效果： 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。 其余属性配置与普通状态相同。
选中状态： 选中状态下面积的样式，选择模式为单选或多选时生效。
- 选择模式：
- 不可选
- 单选
- 多选 其余属性配置与普通状态相同。
- 选择模式：
面包屑： 能够显示当前节点的路径。
显示： 是否显示面包屑。
左边距： 面包屑离容器左侧的距离。
右边距： 面包屑离容器右侧的距离。
上边距： 面包屑离容器上侧的距离。
下边距： 面包屑离容器下侧的距离。
高度： 面包屑的高度。
最小宽度： 当面包屑没有内容时候，设个最小宽度。
普通状态
图形样式
颜色： 面包屑图形颜色。
描边颜色： 面包屑图形描边颜色。
描边线宽： 面包屑图形描边宽度。
描边类型： 面包屑图形描边类型。
阴影属性： 面包屑阴影模糊效果。
文本样式
字体颜色： 文本标签字体颜色。
字体大小： 文本标签字体大小。
字体粗细： 文本标签字体粗细。
字体： 文本标签字体样式。
高亮状态
属性配置与普通状态相同。
层级配置
指定层级： 指定样式生效的层级。
最小显示面积： 如果某个节点的矩形的面积，小于这个数值（单位：px 平方），这个节点就不显示。
最小显示子节点： 如果某个节点的矩形面积，小于这个数值（单位：px 平方），则不显示这个节点的子节点。
这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。
层级颜色： 同一层级的节点的颜色选取列表。
颜色透明度： 本系列默认的颜色透明度选取范围。
数值范围 0 ~ 1。
颜色饱和度： 本系列默认的节点的颜色饱和度选取范围。
数值范围 0 ~ 1。
普通状态：
其属性配置与普通状态相同。
高亮状态：
其属性配置与高亮状态相同。
选中状态：
其属性配置与选中状态相同。
初始动画：
开启动画 是否开启初始动画。
动画时长（ms）： 初始动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
缓动效果 初始动画的缓动效果。
# 视觉映射
# 标题
# 图例
# 提示框
# 工具栏
# 数据
# 静态数据
上图中的示例JSON代码如下：
[
{
"target": "1",
"source": "",
"name": "河南",
"value": 16.7
},
{
"target": "2",
"source": "",
"name": "山西",
"value": 15.63
},
{
"target": "3",
"source": "",
"name": "山东",
"value": 15.38
},
{
"target": "4",
"source": "",
"name": "辽宁",
"value": 14.59
},
{
"target": "5",
"source": "",
"name": "安徽",
"value": 13.97
},
{
"target": "6",
"source": "",
"name": "江苏",
"value": 10.26
},
{
"target": "7",
"source": "",
"name": "重庆",
"value": 8.23
},
{
"target": "8",
"source": "",
"name": "宁夏",
"value": 6.64
},
{
"target": "9",
"source": "",
"name": "北京",
"value": 1.68
},
{
"target": "10",
"source": "",
"name": "天津",
"value": 1.13
}
]
源节点
目标节点
节点数据
name： 面积的名称。
value： 面积的大小。
# 数据资源
# 交互
勾选启用，开启组件交互功能。当单击面积时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 面积单击事件
勾选启用，开启单击面积交互功能。
# 面积悬停事件
勾选启用，开启面积悬停交互功能。
# 面积移出事件
勾选启用，开启面积移出交互功能。
# 数据响应
旭日图支持数据响应配置。
# 节点编程
# 事件
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
面积单击事件： 面积单击触发事件。
- 抛出的参数： 面积所携带的数据。
面积悬停事件： 鼠标在面积悬停时触发事件。
- 抛出的参数： 面积所携带的数据。
面积移出事件： 鼠标从面积移出时触发事件。
- 抛出的参数： 面积所携带的数据。
# 动作
导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。