Page tree
Skip to end of metadata
Go to start of metadata

1 概述

进度图可直观展示某指标的进度,使仪表盘拥有更多视觉效果。以下将分别举例进度图和环形进度图两种图的画法。

2 进度图

2.1 指标完成情况

1、场景描述:某大型零售公司,想要查看当前销售额相对原定销售目标的完成情况,效果如下图所示:

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

3、操作步骤

(1)添加进度图组件,在数据选择区中,勾拖拽 销售额 字段到 指标  销售目标 字段到 提示 

(2)在组件属性设置中,设置 目标值 ,选择 自定义 ,并选择 销售目标 字段,如下图所示:

(3)在组件属性设置中,设置 边框 为粗细为 的 实线,设置内边距为 2,圆角为 10 ,并设置整个进度条的粗细为 20 ,如下图所示:

(4)在组件属性设置中,设置 指标 的形状为 倒三角形,颜色为 橙色,并设置显示 描述 ,即可得到场景中所需的效果,如下图所示:

2.2 各分类项完成情况

1、场景描述:某大型零售公司,想要分析各产品类别的销售量完成情况(销售目标为10000件),如下图所示:

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

3、操作步骤

(1)添加进度图组件,在数据选择区中,勾选 产品类别  销售量 字段,由系统自动分配到 列区  指标 上;或拖拽 产品类别 字段到 列区  销售量 字段到 指标 

(2)对组件进行设置: 布局列数1 ; 目标值 选择 自定义 ,按需设置为 10000 ;即可得到场景中所需图形效果,如下图所示:

3 环形进度图

1、场景描述:某大型零售公司,想要查看当前销售量的完成情况,效果如下图所示:

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

3、操作步骤

(1)添加环形进度图组件,在数据选择区中,勾选 销售量 字段,由系统自动分配到 指标 上;或拖拽 销售量 字段到 指标 

(2)组件数据设置中,点击指标区域的 ,设置指标数据的文字颜色为深蓝色,如下图所示:

(3)在组件属性设置中,设置 目标值 ,选择 自定义 ,按照实际场景设置目标值,比如下图设置目标值表达式=销售量*1.2,如下图所示:

(4)在组件属性设置中,设置 进度 的样式,颜色为 深蓝色 ,内容显示为 百分比 效果,1 位小数,即可得到场景中所需效果,如下图所示:

环形进度图基于油量图实现的,只有油量图的指针才有鼠标提示,环形进度图的提示实际上没有鼠标提示效果。

4 更多功能

  • 更多的图形属性设置项的详细介绍,可参考文档:图形属性
  • 配色修改:如需修改图形配色,可参考文档:颜色设置
  • 交互设计:如需了解交互相关功能,可参考文档:交互设计
  • No labels