Skip to main content

自定义图表

自定义图表在标准图表能力之上，额外支持通过脚本将接口数据转换为 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 结尾，平台会自动补全，但仍建议按示例书写。

使用建议​

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

下一步​

属性明细​

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

组件属性（meta）​

属性名类型含义取值/存储值
Titlestring图表标题，必填文本，最多 20 字符
DataSourcestring数据源9 组件配置中预置（默认） / 0 直接配置 / 1 Chameleon 接口
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）预置柱状图配置
TransformFunctionstring模型转换自定义函数返回 ECharts option 的 JS 脚本，默认见上方示例
FixHeightstring(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/DefaultPageWidgetAggregateDataSourceDataSource=0 时获取默认聚合数据源数据
POST /api/Biz/{MetaInterfaceId}DataSource=1 时通过接口获取数据