Skip to main content

饼状图

饼状图用于展示数据的占比关系，基于 ECharts 渲染。

概述​

将「饼状图」拖入画布后，在右侧属性抽屉中配置图表标题、数据源与图表组件配置。数据源支持直接配置、Chameleon 接口、组件配置中预置三种取值，具体说明见 柱状图。

组件在创建时会预置一份饼状图的 ECharts 配置（含图例、悬浮高亮阴影），可在代码编辑器中按需修改。

配置项​

饼状图的配置项与 柱状图 完全一致：

配置项说明
图表标题图表标题，必填，最多 20 个字符
数据源直接配置 / Chameleon 接口 / 组件配置中预置，默认「直接配置」
操作对象数据源为「直接配置」时必填，选择统计的元对象
默认条件数据源为「直接配置」时配置，JSON 格式的过滤条件
分组字段数据源为「直接配置」时必填，作为饼图扇区的分类字段
聚合方法计数 / 求和 / 平均值 / 最大值 / 最小值，默认「计数」
聚合字段聚合方法非「计数」时选择的聚合字段
排序方式正序 / 倒序，默认「正序」
选择图表数据源接口数据源为「Chameleon 接口」时必填，选择「图表数据源」标签的接口
图表组件配置ECharts 配置 JSON，可在代码编辑器中编辑
高度（px）图表区域高度，取值 100 ~ 1000，默认 400

图表组件配置​

饼状图预置的 ECharts 配置包含：

  • legend：垂直图例，停靠右侧（left 为 right）。
  • series：一条 pie 系列，radius 为 50%；悬停时启用阴影高亮。

与柱状图、折线图不同，饼图的 series.data 由运行时组合为 { "value": 数值, "name": 分类 } 形式，name 取自分组字段取值。

使用建议​

  1. 饼图适合分类数量较少（通常不超过 8 类）的占比展示；分类过多时建议改用柱状图。
  2. 「分组字段」决定饼图的扇区划分，聚合结果即各扇区的值。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。组件的全部 meta 值均以字符串（string）形式存储。该组件的固定 uid 为 56432fe0-8537-48d8-b158-acf35d125e2e。

组件属性（meta）​

饼状图与柱状图、折线图共用同一套配置（见 ChartWidgetBasic），差异仅在 Config 中预置的 series[0].type 为 pie。

属性名类型含义取值/存储值
Titlestring图表标题，必填文本，最多 20 字符
DataSourcestring数据源0 直接配置（默认） / 1 Chameleon 接口 / 9 组件配置中预置
MetaObjectIdstring操作对象 ID，DataSource=0 时必填元对象 GUID
DefaultFilterstring(JSON)默认条件，DataSource=0 时使用默认 {"Field":"isdeleted","Operator":"eq","Value":false}
GroupFieldstring分组字段，DataSource=0 时必填字段名
AggregateMethodstring聚合方法count（默认） / sum / avg / max / min
AggregateFieldstring聚合字段AggregateMethod 非 count 时使用
SortTypestring排序方式1（默认，正序） / -1（倒序）
MetaInterfaceIdstring数据源接口 ID，DataSource=1 时必填「图表数据源」标签接口的 GUID
Configstring(JSON)图表组件配置（ECharts option）见下方预置配置
FixHeightstring(number)高度（px）100 ~ 1000，默认 400

GetSidebarItemMeta() 只预置 Config；DataSource（默认 0）、AggregateMethod（count）、SortType（1）由属性面板写入默认值。

存储示例​

下图给出一个完整的 WidgetItem，饼状图被放置在「基础容器（Row）→ 布局列（Column）」中：

{
  "id": "7b3c2d4e-5f6a-4b7c-9d0e-1f2a3b4c5d6e",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "9f4a3b5e-0b6c-4e8f-9a2b-3c4d5e6f7081",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "d3c4d5e6-0001-4a2b-8c3d-1234567890ab",
          "uid": "56432fe0-8537-48d8-b158-acf35d125e2e",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "ChartPie",
          "widgetTypeName": "饼图",
          "meta": {
            "Title": "状态占比",
            "DataSource": "0",
            "MetaObjectId": "a1b2c3d4-0001-4a2b-8c3d-1234567890ab",
            "DefaultFilter": "{\n    \"Field\":\"isdeleted\",\n    \"Operator\": \"eq\",\n    \"Value\": false\n}",
            "GroupField": "status",
            "AggregateMethod": "count",
            "SortType": "1",
            "Config": "{\n\t\"tooltip\": {\n\t\t\"trigger\": \"item\"\n\t},\n\t\"legend\": {\n\t\t\"orient\": \"vertical\",\n\t\t\"left\": \"right\"\n\t},\n\t\"series\": [\n\t\t{\n\t\t\t\"name\": \"值\",\n\t\t\t\"type\": \"pie\",\n\t\t\t\"radius\": \"50%\",\n\t\t\t\"data\": [],\n\t\t\t\"emphasis\": {\n\t\t\t\t\"itemStyle\": {\n\t\t\t\t\t\"shadowBlur\": 10,\n\t\t\t\t\t\"shadowOffsetX\": 0,\n\t\t\t\t\t\"shadowColor\": \"rgba(0, 0, 0, 0.5)\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t]\n}",
            "FixHeight": "400"
          },
          "children": []
        }
      ]
    }
  ]
}

相关接口​

接口说明
POST /api/Biz/DefaultPageWidgetAggregateDataSourceDataSource=0 时获取默认聚合数据源数据
POST /api/Biz/{MetaInterfaceId}DataSource=1 时通过接口获取数据