logologo
开始
手册
开发
插件
API
English
简体中文
开始
手册
开发
插件
API
English
简体中文
logologo
概述
快速开始

功能介绍

数据查询
图表选项
预览与保存
使用上下文环境变量
页面筛选器与联动

进阶

SQL 模式查询数据
自定义图表配置
自定义交互事件
常见问题
最佳实践
Previous Page数据查询
Next Page预览与保存

#图表选项

配置图表的展示方式,支持两种模式:Basic(图形化)与 Custom(JS 自定义)。Basic 适合快速映射与常用属性;Custom 适合复杂场景与高级定制。

#面板结构

clipboard-image-1761473695

Tips: 为了更方便地配置当前内容,可以先折叠收起其他面板。

最顶部是操作栏 模式选择

  • Basic:图形化配置,选择类型并完成字段映射,常见属性开关直接调整。
  • Custom:在编辑器中编写 JS,返回 ECharts option。

#Basic 模式

20251026190615

#选择图表类型

  • 支持:折线图、面积图、柱状图、条形图、饼图、环形图、漏斗图、散点图 等。
  • 不同图表类型要求的字段可能不同,先确认“数据查询 → 查看数据”的列名与类型。

#字段映射

  • 折线/面积/柱状/条形:
    • xField:维度(如日期、品类、地区)
    • yField:度量(聚合后的数值)
    • seriesField(可选):系列分组(用于多条线/多组柱)
  • 饼/环形:
    • Category:分类维度
    • Value:度量
  • 漏斗:
    • Category:阶段/分类
    • Value:值(通常为数量或占比)
  • 散点:
    • xField、yField:两个度量或维度,用于坐标轴

更多图表选项配置可以参考 Echarts 文档 坐标轴 和 示例

注意:

  • 维度或度量变更后重新确认映射,避免出现空图或错位。
  • 饼/环形、漏斗必须提供“分类 + 值”组合。

#常用属性

20251026191332

  • 堆叠、平滑(折线/面积)
  • 标签显示、提示(tooltip)、图例(legend)
  • 坐标轴标签旋转、分隔线
  • 饼/环形的半径与内半径、漏斗排序方式

建议:

  • 时间序列用折线/面积并适度开启平滑;大类对比用柱状/条形。
  • 数据密集时不必开启全部标签,避免遮挡。

#Custom 模式

用于返回完整的 ECharts option,适合多系列合并、复杂提示、动态样式等高级定制。 推荐用法:把数据统一收敛在 dataset.resource 中,详细用法请参考 Echars 文档 Dataset

20251026191728

#数据上下文

  • ctx.data.objects:对象数组(每行记录,推荐)
  • ctx.data.rows:二维数组(含表头)
  • ctx.data.columns:按列分组的二维数组

#示例:按月订单折线图

return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
    },
  ],
}

#预览与保存

  • Custom 模式下修改完,可以点击右边的 预览 按钮更新图表预览。
  • 在底部点击 “保存”使配置生效并保存;点击“取消”撤销本次所有配置修改。

20251026192816

TIP

关于图表选项的更多说明,请参见 高级用法 — 自定义图表配置。