历史版本19 :百分比圆环仪表盘 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

百分比圆环仪表盘是一个圆环,展示某一项在整个圆环的占比情况,有类别、百分比、数值等指标数据。

利用百分比圆环仪表盘,可以直观地展示某一项占总量的占比、完成率以及达成率之类的数据。

1.2 图表特点

优点:直观的表现出某个指标的进度和完成情况,主要用于进度或占比的展现。

缺点:只能一个维度,指标数据也不宜过多,展示信息有限。

2. 属性介绍编辑

2.1 类型

以单元格元素或悬浮元素插入仪表盘后,可在右边属性面板的类型设置项下,选择百分比圆环仪表盘,如下图所示:

2020-04-11_19-06-02 - 副本.png

2.1.1 百分比圆环仪表盘

百分比圆环仪表盘是一种特殊的图表类型,用于展现关键指标的类别、数量、占比情况。

2020-04-11_19-16-57.png


2.2 数据

百分比圆环仪表盘数据绑定的详细介绍可以参见文档:图表数据

百分比圆环仪表盘部分数据绑定形式有所不同,单独介绍:

  • 数据来源:可选择数据集数据和单元格数据两种。

  • 数据集:此处可选择数据查询、内置数据集、文件数据集等数据集。

  • 分类名称:此处可选择想要展示的关键指标。

  • 指针对应值:此处选择关键指标的数值。

2020-04-19_20-39-15.png

2.3 样式

百分比圆环仪表盘样式设计的详细介绍可以参见文档:图表样式

百分比圆环仪表盘的样式>系列设置项跟基础样式有所不同,单独介绍:

  • 配色:可以切换百分比圆环仪表盘的色彩搭配,目前有8种。

  • 方向:可以控制百分比圆环仪表盘的方向,分为纵向和横向,但由于此处为圆环,两种方向效果一致。

  • 旋转方向:此处可选择顺时针、逆时针两种类型。

  • 底盘背景:此处控制空白圆环区域的背景颜色,默认为灰色。

  • 内底盘背景:此处控制圆环内部的底盘背景颜色,默认为透明。

  • 半径设置:控制百分比圆环仪表盘的大小,分为自动和固定两种类型。

  • 滑槽占比:此处可控制空白圆环的占比,用以区分关键指标的占比情况。

  • 刻度和配色:控制百分比圆环仪表盘的刻度颜色。

2020-04-19_20-52-55.png

2.4 特效

仪表盘特效设置的详细介绍可以参见文档:图表特效

3. 示例编辑

3.1 报表设计

3.1.1 数据准备

新建数据集 ds1,数据库查询语句如下:

select 类别名称,库存量,订购量,再订购量 from 产品,类别

where 产品.类别ID=类别.类别ID and 类别名称="饮料" 

2020-04-11_18-33-35.png

3.1.2 组件设计

将百分比圆环仪表盘拖拽到 body 组件中,调整的位置,如下图所示:

2020-04-11_19-11-56.png


3.1.3 数据绑定

百分比圆环仪表盘的数据绑定方法如下图所示:

2020-04-11_19-13-46.png

3.1.4 样式设计

百分比圆环仪表盘的样式只需要改个标题,其余默认设置即可。

3.2 效果预览

1)PC 端

保存报表,点击表单预览,效果如下图所示:

2020-04-11_19-16-57.png


2)移动端

QQ图片20200411191957.jpg


4. 模板下载编辑

点击下载模板:百分比圆环仪表盘.frm