跳到主要内容

折线图

折线图用于展示数据随时间或有序维度的趋势变化，基于 ECharts 渲染。

概述​

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

组件在创建时会预置一份折线图的 ECharts 配置（含坐标轴、提示框与保存图片工具箱），可在代码编辑器中按需修改。

配置项​

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

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

图表组件配置​

折线图预置的 ECharts 配置包含：

  • xAxis：category 类目轴，boundaryGap 为 false（曲线从边缘开始）。
  • yAxis：value 数值轴。
  • series：一条 line 系列，stack 为 Total（多条序列会堆叠）。
  • toolbox：启用 saveAsImage，可在图上保存图片。

运行时会用数据源返回值填充 xAxis.data 与 series[].data。

使用建议​

  1. 折线图适合按时间维度展示趋势，将「分组字段」设为日期类字段可得到时间序列。
  2. 预置配置的 series.stack 为 Total，多条序列会自动堆叠。
  3. 不需要堆叠时，可在图表组件配置中调整或移除 stack。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。组件的全部 meta 值均以字符串（string）形式存储。该组件的固定 uid 为 06b9c160-fe60-4253-bc60-e712ee018a6d。

组件属性（meta）​

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

属性名类型含义取值/存储值
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": "6a2b1c3d-4e5f-4a6b-8c9d-0e1f2a3b4c5d",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "8e3f2a4d-9a5b-4d7e-8f1a-2b3c4d5e6f70",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "c2b3c4d5-0001-4a2b-8c3d-1234567890ab",
          "uid": "06b9c160-fe60-4253-bc60-e712ee018a6d",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "ChartLine",
          "widgetTypeName": "折线图",
          "meta": {
            "Title": "月度趋势",
            "DataSource": "1",
            "MetaInterfaceId": "d4e5f6a7-b8c9-4d0e-1f2a-3b4c5d6e7f80",
            "Config": "{\n\t\"tooltip\": {\n\t\t\"trigger\": \"axis\"\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\"toolbox\": {\n\t\t\"feature\": {\n\t\t\t\"saveAsImage\": {}\n\t\t}\n\t},\n\t\"xAxis\": {\n\t\t\"type\": \"category\",\n\t\t\"boundaryGap\": false,\n\t\t\"data\": []\n\t},\n\t\"yAxis\": {\n\t\t\"type\": \"value\"\n\t},\n\t\"series\": [\n\t\t{\n\t\t\t\"name\": \"值\",\n\t\t\t\"type\": \"line\",\n\t\t\t\"stack\": \"Total\",\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 时通过接口获取数据