页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

横条图是柱图的横向表现形式,又称横向柱图,用若干个细长的横条长度来表达各类数量大小的图形。

4.1 配图建议

X轴:一个或多个维度一个维度字段;

Y轴:一个或多个度量字段;

4.2 图形特点

优势:显示单个分类项目间的比较情况。这类横条图是最常用的图形之一。

...

(4)在组件设置的数据中,设置颜色为 高尚 颜色系列,点击确定,即可得到场景中所需图形效果,如下图所示:

极坐标柱图
极坐标柱图
8 极坐标柱图

极坐标作为一种特殊的二维坐标系统,可以用来布局维度和度量,其中分类轴对应角度轴,以上半圆的垂直线为分类轴;指标轴对应径向轴。

极坐标柱图是柱图关于笛卡尔坐标系转换到极坐标系的仿射变换,用于进行单个项目的比较。

信息

由于我们的视觉系统更善于比较直线,所以笛卡尔坐标系更适合于比较各个分类的数值比较。因此,极坐标柱图从实用的角度去看,其更多的是一种审美上的需求。

8.1 配图建议

维度:一个维度字段;

指标:一个或多个度量字段;

8.2 图形特点

优势:分类比较结果明显。

劣势:适合展示的数据量比柱图更小。

8.3 业务场景

1、场景描述:某大型零售公司,想要升序查看各发货区域的销售量对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加极坐标柱图组件,在数据选择区中,勾选“发货区域”和“销售量”字段,由系统自动分配到“维度”、“指标”上;或拖拽“发货区域”字段到“维度”,“销售量”字段到“指标”。

(2)在 销售量 字段点击Image Added,在更多菜单中选择 排序方式>升序 ,即可得到场景中所需图形效果,如下图所示:

Image Added

极坐标堆积柱图
极坐标堆积柱图
9 极坐标堆积柱图

极坐标与堆积形态结合表现的一种柱图表现形式,用于比较每个分组的数据总量

9.1 配图建议

维度:一个维度字段;

指标:一个或多个度量字段;

颜色:一个维度。

9.2 图形特点

优势:清晰地比较每个大类别的数据总量差距,以及比较同个大类别下各个子类别的大小

劣势:只适用于维度数不多的情况。

9.3 业务场景

1、场景描述:某大型零售公司,想要分析各发货区域在2020和2021销售量的对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加极坐标堆积柱图组件,在数据选择区中,勾选“发货区域”、“订单年份”和“销售量”字段,由系统自动分配到“维度”、“颜色”和“指标”上;或拖拽“发货区域”字段到“维度”,“订单年份”字段到“颜色”,“销售量”字段到“指标”。

(2)在 销售量 字段点击Image Added,在更多菜单中选择 排序方式>升序 ,即可得到场景中所需图形效果,如下图所示:

Image Added

分区柱图
分区柱图
10 分区柱图

分区柱图可用于同时展示相同维度下不同分类的指标数据,适合用于展示数据差距较大的多指标数据。

10.1 配图建议

X轴:一个维度字段;

Y轴:一个或多个度量字段;

10.2 图形特点

优势:适用于展示数据差距较大的数据,可突出显示不同分类指标的数据量差距。

劣势:当维度数据较多时,图表的可读性会比较差。

10.3 业务场景

1、场景描述:某大型零售公司,想要分析各产品类别的销售量和库存情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加分区柱图组件,在数据选择区中,勾选“产品类别”、“库存”和“销售量”字段,由系统自动分配到“X轴”和“Y轴”上;或拖拽“产品类别”字段到“X轴”,“库存”和“销售量”字段到“X轴”。效果如下图所示:

Image Added

(2)在组件属性中,设置图例在上方,即可得到场景中所需图形效果,如下图所示:

Image Added

11 更多功能

  • 更多的图形属性设置项的详细介绍,可参考文档:图表属性设置
  • 配色修改:如需修改图形配色,可参考文档如需修改图形配色,可参考文档:颜色设置

  • 交互设计:如需了解交互相关功能,可参考文档交互设计:如需了解交互相关功能,可参考文档:交互设计