1 概述
进度图可直观展示某指标的进度,使仪表盘拥有更多视觉效果。以下将分别举例进度图和环形进度图两种图的画法。
2 进度图
2.1 指标完成情况
1、场景描述:某大型零售公司,想要查看当前销售额相对原定销售目标的完成情况,效果如下图所示:
2、以产品内置Demo资源的“订单模型”作为数据来源。
3、操作步骤
(1)添加进度图组件,在数据选择区中,勾拖拽 销售额 字段到 指标 , 销售目标 字段到 提示 。
(2)在组件属性设置中,设置 目标值 ,选择 自定义 ,并选择 销售目标 字段,如下图所示:
(3)在组件属性设置中,设置 边框 为粗细为 1 的 实线,设置内边距为 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 位小数,即可得到场景中所需效果,如下图所示:
环形进度图基于油量图实现的,只有油量图的指针才有鼠标提示,环形进度图的提示实际上没有鼠标提示效果。