自定义图表

自定义图表在标准图表能力之上，额外支持通过脚本将接口数据转换为 ECharts 配置，适合标准聚合数据无法直接满足的复杂图表。

概述

自定义图表复用柱状图的全部配置能力（图表标题、数据源、图表组件配置、高度等），并新增模型转换自定义函数。

转换函数接收「ECharts 配置对象」与「数据源返回数据」，在函数中把数据映射到图表配置后返回配置对象。
组件默认数据源为组件配置中预置，并预置了 transformData 示例函数。
转换脚本必须保留最外层函数格式并 return 配置对象，否则脚本执行失败。

配置项

自定义图表包含柱状图的全部配置项，另增加：

配置项	说明
模型转换自定义函数	编写脚本把数据源数据映射到 ECharts 配置，可在代码编辑器中编辑

模型转换自定义函数

脚本结构如下，参数 option 为当前 ECharts 配置，data 为数据源返回的数据：

// option is the echarts option object, data is response data from datasource
function transformData(option, data) {
    // set value for chart options

    // eg：mapping data to chart
    // option.xAxis[0].data = data.map(item => item.name);
    // option.series[0].data = data.map(item => item.value);

    return option;
}

脚本格式要求

必须保留 function transformData(option, data) { ... } 的外层函数格式并返回配置对象；若脚本未以 return transformData 结尾，平台会自动补全，但仍建议按示例书写。

使用建议

当「直接配置」返回的结构与图表配置不匹配时，用转换函数做字段映射。
复杂的条件渲染、单位换算、多序列拆分等逻辑都可在转换函数中完成。
转换函数仅在数据源为「直接配置」或「Chameleon 接口」时执行；数据源为「组件配置中预置」时不执行，直接按图表组件配置静态渲染。

下一步

柱状图 - 标准图表配置
折线图 - 趋势数据展示
页面 - 返回平台页面总览

属性明细

以下内容面向技术实现与 AI 检索。组件的全部 meta 值均以字符串（string）形式存储。该组件的固定 uid 为 0d61930a-d276-497d-9b29-b7abec2debe7。

组件属性（meta）

属性名	类型	含义	取值/存储值
`Title`	string	图表标题，必填	文本，最多 20 字符
`DataSource`	string	数据源	`9` 组件配置中预置（默认） / `0` 直接配置 / `1` Chameleon 接口
`MetaObjectId`	string	操作对象 ID，`DataSource=0` 时必填	元对象 GUID
`DefaultFilter`	string(JSON)	默认条件，`DataSource=0` 时使用	默认 `{"Field":"isdeleted","Operator":"eq","Value":false}`
`GroupField`	string	分组字段，`DataSource=0` 时必填	字段名
`AggregateMethod`	string	聚合方法	`count`（默认） / `sum` / `avg` / `max` / `min`
`AggregateField`	string	聚合字段	`AggregateMethod` 非 `count` 时使用
`SortType`	string	排序方式	`1`（默认，正序） / `-1`（倒序）
`MetaInterfaceId`	string	数据源接口 ID，`DataSource=1` 时必填	「图表数据源」标签接口的 GUID
`Config`	string(JSON)	图表组件配置（ECharts option）	预置柱状图配置
`TransformFunction`	string	模型转换自定义函数	返回 ECharts option 的 JS 脚本，默认见上方示例
`FixHeight`	string(number)	高度（px）	`100` ~ `1000`，默认 `400`

GetSidebarItemMeta() 预置 DataSource（9）、Config（柱状图配置）与 TransformFunction（示例脚本）；AggregateMethod（count）、SortType（1）由属性面板写入默认值。转换函数通过 new Function('option', 'data', code) 动态执行，脚本未以 return transformData 结尾时会自动补全 return transformData;。

存储示例

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

{
  "id": "ae6f5071-8c9d-4e0f-9a1b-4c5d6e7f8091",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "2c7d6e81-3e9f-4b2c-8d5e-6f7081920314",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "061f7081-0001-4a2b-8c3d-1234567890ab",
          "uid": "0d61930a-d276-497d-9b29-b7abec2debe7",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "CustomChart",
          "widgetTypeName": "自定义图表",
          "meta": {
            "DataSource": "1",
            "MetaInterfaceId": "a7b8c9d0-e1f2-4a3b-4c5d-6e7f80910213",
            "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}",
            "TransformFunction": "// option is the echarts option object, data is response data from datasource\nfunction transformData(option, data) {\n    // set value for chart options\n    \n    // eg：mapping data to chart\n    // option.xAxis[0].data = data.map(item => item.name);\n    // option.series[0].data = data.map(item => item.value);\n    \n    return option;\n}\n",
            "FixHeight": "400"
          },
          "children": []
        }
      ]
    }
  ]
}

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

概述​

配置项​

模型转换自定义函数​

使用建议​

下一步​

属性明细​

组件属性（meta）​

存储示例​

相关接口​

概述

配置项

模型转换自定义函数

使用建议

下一步

属性明细

组件属性（meta）

存储示例

相关接口