页面树结构

版本比较

标识

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

...

含坐标轴的图形支持设置坐标轴的刻度最大最小值、坐标轴样式等。含坐标轴的图形类型包括:柱图类、趋势线类、联合图类、散点图类、热力图。

2 坐标轴数据设置

1、 颜色 区上点击 Image Removed,然后在弹出窗口中选择一种颜色、设置透明度,图形中的所有系列都将更新为您选择的颜色。

设置颜色的方法包含:在推荐色中选择颜色、输入 RGB 颜色值和输入十六进制颜色码。

...

业务场景示例

1、场景描述:某大型零售公司,想要分析各产品类别的销售量和销售额数据,效果如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源。

3、操作步骤

(1)添加双Y联合图组件,在数据选择区中,勾选 产品类别 、销售量 销售额 字段,由系统自动分配到 X轴 和 Y轴 上;或拖拽 产品类别 字段到 X轴 , 销售量、销售额 字段到 Y轴 。

Image Added

(2)组件数据设置中,点击Y轴区域的 Image Added,按照上述场景效果图要求设置坐标轴,如下图所示:

  • 左轴(销售量数据)设置 刻度值最大值 表达式= 销售量*1.2 

Image Added

  • 对 右轴(销售额数据),设置数据格式为 万元,设置刻度值最小值为 40000 ,最大值为 400000 

Image Added

(3)点击确定,即可得到场景中所需效果,如下图所示:

Image Added

更多设置说明

1、只有度量字段所在的坐标轴才支持坐标轴的数据设置。

Image Added

2、各设置项说明如下:

(1)轴位置:用于确定当前所配置的是哪个指标轴,只有指标轴大于等于2个轴时,才会显示该设置项。

  • 双Y联合图和对比柱图

Image Added

  • 分区柱图

Image Added

(2)轴名称:用于自定义轴的名称。

Image Added

(3)数据格式:用于设置轴刻度的数据格式。可选择的数据格式来源于 数据格式

例如:当轴刻度数据较大时,可5000000设置为500万,使图形效果更加美观。

Image Added

Image Added

(4)对数轴:对数轴以 10 的幂次增长的算法来绘制轴标签,可与最大值、最小值一起使用。

当同一指标轴上两指标数据差距特别大时,可以对数值小的指标进行对数轴处理,使数据图形效果看起来更美观。

Image Added

Image Added

(5)刻度值:用于设置坐标轴刻度的最大值和最小值。

  • 自动:默认选择自动,轴刻度根据需要显示的指标数据,自动调整最大值、最小值。
  • 自定义:用于在编辑框内自定义刻度值的最大值、最小值。目前支持对单个度量设置刻度值自定义范围。支持在字段选择框中选择字段,或在公式编辑框中输入数值,或加减乘除四则运算。

字段选择框:字段来源为图形已选择的行区、列区、标记区的度量字段;

公式编辑框:动态字段在公式编辑框中进行Max、Min函数计算,手动输入其他函数无效,并实时校验公式是否合理;

在公式编辑框中可通过+ - * / 运算符,可以将动态字段和静态值结合起来做计算。如:Max(销售量)*1.5+50。

Image Added

3 坐标轴样式设置

以产品内置Demo资源的“订单模型”作为数据来源,介绍各种图形颜色功能的相关使用场景。

...