饼图组件主要用于展示数据的占比,支持调整内环直径形成环形图。该组件可绑定静态数据、接口数据源或数据表资源使用。本文介绍饼图组件的配置和使用方法。

前提条件

参考以下操作完成Web应用创建。
  1. 创建项目
  2. 创建Web应用

操作步骤

本文主要介绍组件样式的个性配置。有关组件样式的通用配置,请参见样式配置

  1. 在Web可视化编辑页面,单击最左侧的组件图标组件
  2. 在画布左侧组件下拉列表,选择基础组件,并展开图表列表。
  3. 拖拽一个饼图组件到画布中,单击右侧样式中的配置
    添加饼图组件
    在打开的组件数据配置页面,自动展开了数据源配置面板。
  4. 选择数据源类型,完成配置后,单击确定
    有关数据源的配置说明,请参见本文下方的数据源数据源配置
  5. 可选: 单击左上角数据表,查看已配置数据源的所有数据信息。
  6. 数据展示配置页面,根据配置项说明(见下表)设置饼图数据和样式。
    配置数据展示
    配置项 说明
    数据源 显示已配置的数据源名称。
    说明 当组件数据源类型为接口数据源和静态数据源时,组件中数据不支持筛选、排序、聚合等功能。
    维度 完成数据源配置后,根据数据类型自动解析相关字段至维度或度量模块中。

    支持的数据类型:

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

    支持操作:

    • 拖拽维度下的一个字段到切片框中,作为饼图中数据分类的数据源。
    • 拖拽度量下的一个字段到角度框中,作为饼图中数据占比的数据源。
    • 修改字段的显示名称。
    • 添加字段到筛选器,作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
      说明 只有当组件数据源类型为数据表资源时,才支持该功能。 详细配置指导请参见筛选器配置
    度量
    切片 显示添加的维度字段。 支持编辑字段的显示名称。
    角度 显示添加的度量字段。
    • 支持编辑字段的显示名称。
    • 支持汇总方式:总和(默认值)、平均值、最大值、最小值、总数。

      纵轴中的度量字段前会显示设置的汇总方式。

      设置度量字段汇总方式后,支持再次配置过滤筛选条件,展示特定数据。

    颜色 展示在切片中已经添加维度字段的所有数据项。默认为每个数据项在饼图中自动分配一个颜色,支持修改。
    说明 不支持在颜色属性中新增或者删除维度字段的数据项。
    全局样式 设置全局字体和内径占比。

    调节内径占比可形成环形图。默认内径占比为0,即为饼图。

    标题 设置是否显示标题或图例标志。默认显示,支持配置标题内容、字号、颜色、粗细和位置。
    图例
    标签 设置标签内容、字号、颜色、位置,是否显示百分比、是否显示数值和维度项名称。
    背景 设置饼图是否显示背景颜色。默认显示,支持配置背景色。
    边框 设置饼图是否显示边框。默认显示,支持设置粗细颜色样式
  7. 可选: 在Web可视化编辑页面,选中目标组件的交互页签,配置事件和交互动作。详细配置指导请参见交互配置
  8. 单击页面右上方的预览,查看或调试组件的展示数据。

数据源

  • 静态数据

    自定义的数据需要符合以下格式:

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

    支持的接口来源为数据分析服务自定义接口服务开发工作台

  • 数据表资源

    支持的数据表类型为平台系统表设备数据表设备快照表设备事件表