跳到主要内容

柱状图

柱状图以竖直柱条对比展示分类数据，基于 ECharts 渲染。

概述​

将「柱状图」拖入画布后，在右侧属性抽屉中配置图表标题、数据源与图表组件配置。数据源支持三种取值：

  • 直接配置：在页面内选择操作对象、分组字段与聚合方法，由平台内置聚合接口返回数据，无需事先创建接口。
  • Chameleon 接口：引用一个标签为「图表数据源」的平台接口。
  • 组件配置中预置：不请求数据，仅按「图表组件配置」静态渲染。

组件在创建时会预置一份柱状图的 ECharts 配置，可在代码编辑器中按需修改。

配置项​

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

图表组件配置​

「图表组件配置」保存的是一段 ECharts option。柱状图预置的配置包含：

  • xAxis：category 类目轴，运行时由分组字段的取值填充。
  • yAxis：value 数值轴。
  • series：一条 bar 系列，barWidth 为 60%。

运行时会用数据源返回值填充 xAxis[].data 与 series[].data，因此配置中无需写死数据。

使用建议​

  1. 快速统计时优先使用「直接配置」，省去配置接口的成本。
  2. 需要复杂查询逻辑时，在平台接口中配置数据后以「Chameleon 接口」方式引用。
  3. 图表配置可参考 ECharts 官方示例 自行调整。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。组件的全部 meta 值均以字符串（string）形式存储。该组件的固定 uid 为 89def9e9-6279-469f-a88e-355a1a7499cf。

组件属性（meta）​

属性名类型含义取值/存储值
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": "5c1f0a2b-6d3e-4f7a-8b9c-0d1e2f3a4b5c",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "7d2e1b3c-8f4a-4c6d-9e0f-1a2b3c4d5e6f",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "b1a2c3d4-0001-4a2b-8c3d-1234567890ab",
          "uid": "89def9e9-6279-469f-a88e-355a1a7499cf",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "ChartBar",
          "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\": \"axis\",\n\t\t\"axisPointer\": {\n\t\t\t\"type\": \"shadow\"\n\t\t}\n\t},\n\t\"grid\": {\n\t\t\"left\": \"5%\",\n\t\t\"right\": \"5%\",\n\t\t\"bottom\": \"5%\",\n\t\t\"containLabel\": true\n\t},\n\t\"xAxis\": [\n\t\t{\n\t\t\t\"type\": \"category\",\n\t\t\t\"axisTick\": {\n\t\t\t\t\"alignWithLabel\": true\n\t\t\t},\n\t\t\t\"data\": []\n\t\t}\n\t],\n\t\"yAxis\": [\n\t\t{\n\t\t\t\"type\": \"value\"\n\t\t}\n\t],\n\t\"series\": [\n\t\t{\n\t\t\t\"name\": \"值\",\n\t\t\t\"type\": \"bar\",\n\t\t\t\"barWidth\": \"60%\",\n\t\t\t\"data\": []\n\t\t}\n\t]\n}",
            "FixHeight": "400"
          },
          "children": []
        }
      ]
    }
  ]
}

相关接口​

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