本文介绍了饼图组件的配置和使用方法。

概述

饼图组件是图表类组件中的一种,常用于展示数据的占比。

  • 支持绑定静态数据、接口数据源或数据表资源。
  • 支持调整内环直径形成环形图。
新饼图组件

样式配置

在组件的配置页面包含数据表数据展示两个页签:

  • 数据表:已配置数据源后,用于预览数据表,该数据表展示维度和度量下所有字段的数据。
  • 数据展示:用于数据源配置和饼图数据及展示效果配置。
功能类型 说明
数据源 完成饼图数据源配置后,此处显示饼图的数据源类型。
说明
  • 未配置组件数据源时,此处显示数据源配置,单击此按钮可开始组件数据源配置。详细内容请参见数据源
  • 当组件数据源类型为接口数据源和静态数据源时,组件中数据不支持筛选、排序、聚合等功能。
维度 饼图组件数据源配置完成后,会根据数据类型自动解析相关字段至维度或度量模块中。

维度和度量支持的数据类型:

  • 维度:字符型、时间型字段。
  • 度量:数值型字段。

支持操作如下:

  • 拖拽维度下的一个字段到切片框中,作为饼图中数据分类的数据源。
  • 拖拽度量下的一个字段到角度框中,作为饼图中数据占比的数据源。
  • 修改字段的显示名称。
  • 添加字段到筛选器,作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
度量
切片 显示添加的维度字段。
  • 仅支持添加一个维度字段。
  • 支持编辑字段的显示名称。
角度 显示添加的度量字段。
  • 仅支持添加一个度量字段。
  • 支持编辑字段的显示名称。
  • 支持如下汇总类型:总和、平均值、总数、最大值、最小值。
属性:筛选器 只有当表格数据源类型为数据表资源时,才支持该功能。

筛选器作用:

  • 支持通过筛选器对数据进行过滤,展示特定数据。
  • 支持将筛选项在前端显示为查询项,方便在运行态随时对数据进行搜索或过滤。

使用方法:

  1. 在维度或度量栏下,单击字段的三角入口,选择筛选器选择筛选器
  2. 设置字段的过滤筛选条件,并单击确认

    表格默认展示该字段的全部数据,支持字符型、数值型、时间型的筛选条件设置。下文以字符型筛选设置为例:

    单击字段筛选下的输入框,输入关键字搜索并选择筛选值,支持多选。

    设置筛选器

    如果您还需要在运行态时,随时对字段进行过滤查询,可勾选展示为查询项,组件上方会出现该字段的查询框。

    显示项

    右侧属性栏显示已配置筛选字段名称。

    筛选字段
    说明 将字段设置为筛选器时,如果没有设置任何过滤,且未勾选展示为查询项,该字段不会显示在右侧的筛选器中。
属性:颜色 颜色: 展示在切片中已经添加维度字段的所有数据项。默认为每个数据项在饼图中自动分配一个颜色,可修改字段数据项在饼图中的颜色。
说明 不支持在颜色属性中新增或者删除维度字段的数据项。
样式:全局样式 设置字体类型和饼图类型。
  • 字体:微软雅黑、苹方、宋体、黑体
  • 内径占比:调节内径占比可形成环形图。默认内径占比为0,即为饼图。
样式:标题 勾选后,显示饼图标题、图例标志。 可设置显示效果。
  • 标题内容:设置标题的内容
  • 字号:设置字号值
  • 颜色:设置字体颜色
  • 粗细:可选加粗(默认值)、标准
  • 位置:设置标题和图例位置
    • 标题:可选居左(默认值)、居中、居右
    • 图例:可选上/下(左、中、右)、左/右(上、中、下),默认值为右中
样式:图例
样式:标签 设置标签显示效果。
  • 标签内容:可选择展示的内容为全部值最大值与最小值
  • 字号
  • 颜色
  • 位置:居内、居外
  • 显示百分比:默认勾选
  • 显示数值:支持勾选是否显示维度字段的数据项对应的值
  • 显示维度项名称:支持勾选是否显示维度字段的数据项名称
样式:背景 设置条形图的背景颜色和边框显示效果。
  • 背景色
  • 边框:勾选后,需设置粗细颜色样式

数据源

  • 静态数据源

    选择静态数据源时,自定义的数据需要符合以下格式:

    说明
    • 自定义的静态数据中至少有一个维度和度量字段的数据类型,以保证数据可以设置为二维数据格式,即切片和角度必须都有可添加的字段(值)。
    • 每行的数据个数必须相同。如果没有数据,需使用双引号占位。
    {
      "data": [
        {
          "month": "Jan",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Feb",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Mar",
          "sales": 300,
          "cost": 150
        }
      ]
    }
  • 接口数据源

    选择接口数据源时,支持的接口来源为数据分析服务自定义接口服务开发工作台。有关接口数据源的配置详情,请参见接口

  • 数据表资源

    有关数据表资源的配置详情,请参见数据表资源

动作

在Web可视化编辑页面,选中饼图组件的交互页签,可进行事件和动作的交互配置。

组件支持交互动作配置的详细内容请参见交互配置

组件支持以下事件:

  • 鼠标移入:鼠标移入饼(环形)图区域,触发动作。
  • 鼠标移出:鼠标从饼(环形)图移出,触发动作。

案例

以配置静态数据源为例,以饼图形式展示某调查小组采集的数据,如下图所示:

饼图展示
  1. 在Web可视化编辑界面的组件栏,拖拽一个饼图组件到画布中,并单击右侧样式栏的配置添加饼图组件
  2. 在数据源配置中,选择静态数据,自定义静态数据,并单击确定
    {
      "data": [
        {
          "type": "TV",
          "sales": 300
        },
        {
          "type": "Food",
          "sales": 500
        },
        {
          "type": "Music",
          "sales": 260
        },
        {
          "type": "IOS",
          "sales": 450
        }, {
          "type": "Android",
          "sales": 600
        }
      ]
    }
  3. 数据展示页面,分别拖拽自动解析的维度和度量字段到纵轴和横轴栏中,进行如图所示配置。配置数据展示
    说明 更多样式配置请参见样式配置