Echarts图形-树图

概要说明

树图是以树结构的方式组织展现各级分类及指标的一类图形，它是利用包含关系表达层次化数据的可视化方法。

树图既可以组织存在父子结构的项目，亦可以组织无父子关系的项目。下图中图1树图是基于父子关系结构字段构建，图2是基于非父子关结构字段构建，其中非父子关系结构构建树图时是按照字段从左至右的包含关系构建，要求必须定义指标轴（Y轴）。

类型

图例

基于父子关系结构字段构建。

示例详情请参见情景1。

基于非父子关结构字段构建。

其中非父子关系结构构建树图时是按照字段从左至右的包含关系构建，要求必须定义指标轴（Y轴）。

示例详情请参见情景2。

树图的特点说明如下：

优势：可以清晰地显示树状层级结构，在展示横跨多个层级的数据信息时非常方便。

劣势：无法显示占比功能。

数据要求：有层级关系的数据。

适用场景：树图能够直观体现同级之间的比较，比较适用于关联类的需求。

不适用场景：没有层级关系的数据。

实现方案

情景1

业务情景描述：展示地域性字段的包含关系。

数据结构：

定制要点：

设置“是否父子维”为“是”，并设置好父节点、子节点及名称显示的字段。

示例效果：

以上设置效果如下：

情景2

业务情景描述：展示按照产品类别、产品、区域和城市的层次的销售数据。

数据结构：

定制要点：

设置“是否父子维”为“否”，勾选“产品目录”、“区域”和“城市”字段为分类（X）轴，“单价”和“数量”字段为指标（Y）轴。

预览效果：

属性

属性			普通柱图	堆积柱图	瀑布图	普通横条图	堆积横条图	3D柱图
数据设置	字段		√	√	√	√	√	√
	分类(X)轴		√	√	√	√	√	√
	指标(Y)轴		√	√	√	√	√	√
	并列轴		√	√		√	√
	指标(Z)轴							√
基本设置	通用	画布大小	√	√	√	√	√
		背景颜色	√	√	√	√	√	√
		显示方式	√	√	√	√
		边距	√	√	√	√	√
		初始化动画	√	√	√	√	√
		防止Y轴标签溢出	√	√	√	√	√
		防止X轴标签溢出	√	√	√	√	√
		宽度						√
		高度						√
		空间坐标系宽度						√
		空间坐标系高度						√
		空间坐标系深度						√
		是否显示坐标系						√
	坐标轴线	线条样式						√
	刻度标签	是否显示						√
	刻度标签	刻度标签样式						√
	坐标轴刻度	是否显示						√
	坐标轴刻度	线条样式						√
	分隔线	是否显示						√
	分隔线	分隔线样式						√
	分隔区域	是否显示						√
	视角控制	投影方式						√
		是否自动旋转						√
		旋转方向						√
		旋转速度						√
		恢复时间						√
标题	标题		√	√	√	√	√	√
	标题样式		√	√	√	√	√	√
	水平位置		√	√	√	√	√	√
坐标轴	分类轴/指标轴	坐标轴名称	√	√	√	√	√	√
		坐标轴名称样式	√	√	√	√	√	√
		坐标轴名称位置	√	√	√	√	√
		名称到轴线的距离	√	√	√	√	√	√
		标注步长	√	√	√	√	√
		刻度标签显示方式	√	√	√	√	√
		标签间隔						√
		刻度标签样式	√	√	√	√	√	√
		数据格式	√	√	√	√	√	√
		是否应用于标签	√	√	√	√	√	√
		刻度设置	√	√	√	√	√
		分隔线	√	√	√	√	√
		分隔区域	√	√	√	√	√
		坐标轴线	√	√	√	√	√
图例	位置		√	√	√	√	√
图例	文字样式		√	√	√	√	√
提示	是否显示		√	√	√	√	√	√
	背景颜色		√	√	√	√	√	√
	边框宽度		√	√	√	√	√	√
	提示文本样式		√	√	√	√	√	√
	添加其他列		√	√	√	√	√	√
工具	功能按钮设置	数据视图	√	√	√	√	√	√
		数据区域缩放	√	√	√	√	√
		配置项还原	√	√	√	√	√	√
		保存图片	√	√	√	√	√	√
序列	柱子宽度		√	√	√	√	√
	堆积名称			√			√
	倒角尺寸							√
	倒角光滑度							√
	普通状态设置	系列主色	√	√	√	√	√	√
		图形透明度						√
		数据项标签	√	√	√	√	√	√
		位置	√	√	√	√	√
		标签与图形距离						√
		文本样式	√	√	√	√	√	√
	高亮状态设置	系列主色	√	√	√	√	√	√
		图形透明度						√
		数据项标签	√	√	√	√	√	√
		位置	√	√	√	√	√
		标签与图形距离						√
		文本样式	√	√	√	√	√	√
	数据标注设置		√	√	√	√	√
	数据标线设置	标线类型	√	√	√	√	√
	数据标线设置	标记颜色	√	√	√	√	√
高级	图形标识		√	√	√	√	√	√
	图形数据动态变化							√
	图形输出行数		√	√	√	√	√	√
	图形主题		√	√	√	√	√	√
	排序	排序顺序	√	√	√	√	√
	排序	排序指标	√	√	√	√	√
扩展属性			√	√	√	√	√	√

关注我们

服务支持

页面树结构

Echarts图形-树图

概要说明

实现方案

情景1

情景2

属性