1. 概述
1.1 版本
| 报表服务器版本 | 功能变动 |
|---|---|
| 10.0.16 | 值标签、数据点提示以及监控刷新自动数据提示新增显示项——目标值 |
| 10.0.17 | 配色逻辑优化：新增按分类显示配色，按图形内显示渐变色的方式，同时保留原有按值设置配色的方式，详情参见本文 2.3.1 |
1.2 应用场景
「百分比圆环仪表盘」是一个完整的圆环，用来展示某一项在整个圆环的占比情况，包含类别、百分比、数值等指标数据。
利用百分比圆环仪表盘，可以直观地展示某一项占总量的占比、完成率以及达成率之类的数据。效果如下图所示：
1.3 图表特点
优点：直观的表现出某个指标的进度和完成情况，主要用于进度或占比的展现。
缺点：只能一个维度，指标数据也不宜过多，展示信息有限。
1.4 应用实例
决策报表中可使用 组件复用 功能，下载安装组件后，直接替换数据即可快速复用组件样式，实现百分比圆环仪表盘的效果。
更多组件示例，可参见 帆软市场-组件 / 设计器→在线组件库。
| 组件下载链接 | 描述 | 效果图 |
|---|---|---|
| 百分比圆环仪表盘指标卡-简约蓝 | 仪表盘可用于表示进度、完成率、占比等指数据关系 | |
| 百分比圆环仪表盘-酷炫 | 图表优点：直观的表现出某个指标的进度和完成情况，主要用于进度或占比的展现。 图表缺点：只能一个维度，指标数据也不宜过多，展示信息有限 | |
2. 属性介绍
2.1 类型
以单元格元素或悬浮元素插入仪表盘后，可在右边属性面板的类型设置项下，选择百分比圆环仪表盘，如下图所示：
2.2 数据
基础数据设置项详细介绍可以参见文档：图表数据
分类名：百分比对应的分类名称，前端展示时显示在中间滑槽区域。
指针值：百分比计算时分子的一部分，要配合坐标轴下的最小值形成分子。
目标值：百分比计算时分母的一部分，要配合坐标轴下的最小值形成分母。
注1：百分比计算公式：（指针值-最小值）/（目标值-最小值），最小值指的是坐标轴处设置的最小值，详情参见下面样式的说明。
注2：2020-07-06 及之后版本的 JAR 包新增指针值和目标值设置项。
2.3 样式
百分比圆环仪表盘样式设计的详细介绍可以参见文档：图表样式
2.3.1 系列
百分比圆环仪表盘的「样式>系列」设置项跟基础样式有所不同，简单介绍：
1）颜色：
配色风格默认为「纯色」，颜色划分默认为「分类」，仪表盘不同分类根据配色方案显示颜色。
配色风格为「纯色」，颜色划分选择「值」时，需设置「刻度和配色」：仪表盘根据刻度值显示仪表盘圆环的颜色，默认自动，取配色方案中前三种颜色，分别适配刻度 0~1/3，1/3~2/3，2/3~1 的区间色；选择自定义时，可设置值属于某个范围显示某个颜色。
注：10.0.17 版本之前的设计器中仅有「按值划分」的配色逻辑。
配色风格为「渐变色」时，每个分类仪表盘的颜色显示相同的渐变效果。
2）布局/样式
方向：数据集中有多个分类，前端展示时会出现多个仪表盘，此时可以改变这些仪表盘的排列方向。
旋转方向：此处可选择顺时针、逆时针两种类型。
底盘背景：此处控制显示百分比圆环区域的背景颜色，默认为灰色。
内底盘背景：此处控制圆环内部的底盘背景颜色，默认为透明。
半径设置：控制百分比圆环仪表盘的大小，分为自动和固定两种类型。
滑槽占比：改变百分比圆环区域的占比。
2.3.2 标签
百分比圆环仪表盘的「样式>标签」设置项跟基础样式有所不同，简单介绍：
百分比标签和值标签下的字号选择「自动」时，字体大小会根据仪表盘大小自动调整。
百分比标签下的颜色选择「自动」时，百分比标签的颜色会跟随系列色显示。
10.0.16 版本及之后，「值标签」支持显示「目标值」，默认不勾选。
2.3.3 坐标轴
百分比圆环仪表盘的「样式>坐标轴」设置项跟基础样式有所不同，简单介绍：
自定义最小值：勾选后可以自定义最小值，默认不勾选。
最小值：该值跟形成分子和分母有关系，百分比计算公式：（指针值-最小值）/（目标值-最小值）。
注：2020-07-06 及之后版本的 JAR 包坐标轴有变动，只能设置最小值。
2.4 特效
仪表盘特效设置的详细介绍可以参见文档：图表特效
注：百分比仪表盘的特效设置项下没有条件显示。
3. 示例
3.1 报表设计
3.1.1 数据准备
新建决策报表，新建数据库查询 ds1，SQL 查询语句为：
select 类别名称,sum(库存量)as 库存量 from 产品,类别
where 产品.类别ID=类别.类别ID and 类别名称="饮料"
3.1.2 组件设计
将百分比圆环仪表盘拖拽到 body 组件中，调整的位置，如下图所示：
3.1.3 数据绑定
百分比圆环仪表盘的数据来源为「数据集数据」，选择数据集 ds1，分类名为「类别名称」，指针值为「库存量」，目标值选择「自定义」设置为 500。如下图所示：
3.1.4 样式设计
可根据实际需要设置仪表盘样式，这里设置仪表盘的「标题」和「标签」如下图所示：
3.2 效果预览
3.2.1 PC 端
保存模板，点击「PC 端预览」，效果如下图所示：
3.2.2 移动端
App 端和 HTML5 端均支持，效果如下图所示：
4. 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\百分比圆环仪表盘.frm
点击下载模板：百分比圆环仪表盘.frm