树图,又称矩形树图,是一种有效的实现层级结构可视化的关系型图表结构。
在树图中,各个小矩形的面积表示每个子节点的大小,面积越大,表示子节点在父节点中的占比越大,整个矩形的面积之和表示整个父节点。右键点击矩形块可下钻到子分支,每个子分支的矩形又按照相应节点的子节点进行分割。
通过树图及其钻取情况,我们可以很清晰地知道数据的全局层级结构和每个层级的详情。
...
...
1) 可以清晰地显示树状层级结构,在展示横跨多个层级的数据信息时非常方便,从图表中可以直观地看到每一层的每一项占父类别和整体类别的比例。
2) 相比起传统的树形结构图,矩形树图能更有效利用空间,并且拥有展示占比的功能。
劣势:以面积表示大小,当数值相近时人眼难以辨别。
...
...
不适用场景:没有权重关系,不需要数值大小对比的数据,没有层级关系的数据。
实现方案
业务情景描述:展示发货区域和下一层级发货城市的销售数量。
数据结构
业务情景的数据来源如下:
我们的基础数据以明细表的形式存储。
定制要点
拖拽“发货省份”字段到 标记>标签 上,“数量”字段到 标记>大小 和 标记>颜色 上。
钻取设置
通过对层级结构的字段创建层次,树图可以实现右键选择下钻到下一层次和上钻返回的效果。具体操作请参考 功能示例-自定义层次维下钻 。
配色修改(设置颜色分类)
多色配色可以设置 标记>标签 的字段按照 标记>颜色 的字段进行颜色分类。
选中树图组件,拖拽字段“发货区域”到“标记区”的 颜色 标记项, 可以设置发货省份按照其所属区域以不同的颜色显示。如下图所示:
...
Title_font | ||
---|---|---|
|
Wiki 标记 |
---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
Title_font_1 Name 情景1
Name | 情景1 |
---|
业务情景描述:展示地域性字段的包含关系。
数据结构:
定制要点:
设置“是否父子维”为“是”,并设置好父节点、子节点及名称显示的字段。
示例效果:
以上设置效果如下:
Title_font_1 Name 情景2
Name | 情景2 |
---|
业务情景描述:展示按照产品类别、产品、区域和城市的层次的销售数据。
数据结构:
定制要点:
设置“是否父子维”为“否”,勾选“产品目录”、“区域”和“城市”字段为分类(X)轴,“单价”和“数量”字段为指标(Y)轴。
注:根节点不能设置为1,也即不需要设置
预览效果:
Title_font | ||
---|---|---|
|
Wiki 标记 |
---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
树图的属性包括数据设置、基本设置、标题、提示、工具、序列、高级、扩展属性等,具体请参考下面表格: