饼图

  • 文档创建者:印然
  • 编辑次数:35次
  • 最近更新:Leo.Tsai 于 2020-07-02
  • 1. 概述

    1.1 应用场景

    饼图是以扇形区域大小表示每一个数值相对于总数值的占比。

    饼图适用于二维数据,即一个分类字段,一个连续数据字段,当用户更关注与简单占比时,适合使用饼图。

    1.2 图表特点

    优点:能很直观的看到每一个部分在整体中所占的比例。

    缺点:不适合较大的数据集(分类)展现,数据项中不能有负值,当比例接近时,人眼很难准确判别。

    2. 属性介绍

    2.1 类型

    以单元格元素或悬浮元素插入饼图后,可在右边属性面板的类型设置项下,自由选择3种子类型,如下图所示:

    2020-04-10_22-14-07.png

    2.1.1 饼图

    普通的饼图,根据所占区域的大小比较各数据量之间的差异。

    1586854760199935.png


    2.1.2 等弧度玫瑰图

    等弧:在同圆或等圆中,能够互相重合的弧。

    扇形由于等弧的原因会比较整洁,拥有比较好的美观度。

    1586854792604350.png

    2.1.3 不等弧度玫瑰图

    不等弧:在同圆或等圆中,不能互相重合的弧。

    扇形的区域大小区别很明显,拥有比较强的直观度。

    1586854806692936.png

    2.2 数据

    饼图数据绑定的详细介绍可以参见文档:图表数据

    2.3 样式

    饼图基础样式的详细介绍可以参见文档:图表样式

    2.4 特效

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

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

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

    select 类别名称,sum(库存量) as kc from 产品,类别

    where 产品.类别ID=类别.类别ID and 类别名称!="日用品"

    group by 类别名称

    1586529481633154.png

    3.1.2 组件设计

    将3个饼图拖拽到 body 组件中,分别设置成3个不同的子类型,调整它们之间的位置关系,如下图所示:

    1586857775310207.png

    3.1.3 数据绑定

    3个子类型的数据绑定方法是一样的,如下图所示:

    2020-04-12_22-19-53.png

    3.1.4 样式设计

    三种饼图的样式只需要改个标题,其余默认设置即可。

    3.2 效果预览

    3.2.1 PC 端

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

    1586854358917995.png

    3.2.2 移动端

    3274bc334c456e0c9eae2fc1df478f4.jpg

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\饼图.frm

    点击下载模板:饼图.frm

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!