跳到主要内容

折线图

适用场景#

用于报表场景下展示数据随时间变化产生的趋势。

使用说明

进入应用编辑器页面,将图表组件 > 折线图组件拖进相应容器即可。

属性

组件接收的外部传入的属性

属性名
属性标识
类型
说明
线条类型chartTypestring

支持折线和曲线

示例:"line"

显示标题isTitleboolean

示例:true

图表标题titlestring

示例:"折线图标题"

数据源dataSourceTypestring

数据源类型选择

示例:"data-model"

数据模型dataModelobject

展示模型数据的数据来源

APIsconnectorobject

展示数据的APIs来源选择

调用方法connectorMethodobject

方法的出入参需满足组件要求,查看文档

展示数据的APIs调用方法选择

查询入参connectorParamsobject

对APIs调用方法获取的数据进行筛选过滤。支持对象类型,例如 {name:'',value:''}

数据筛选filterDataobject

可配置数据取值范围,可参见 数据筛选配置

配色setColorarray

当有多个数值字段或维度字段分组时,不同类别将按照不同配色展示,支持自定义色卡

示例:[ "#2A70E2", "#46B690", "#EDB539", "#E46961", "#4FB3D2", "#805FDC" ]

字段选择xFieldobject

X轴数值字段选择

统计维度xStatisticsstring
显示空值坐标xIsCountEmptyboolean

示例:false

字段选择yFieldobject

Y轴数值字段选择

分组groupKeystring

当 Y 轴仅选择一个字段时,支持根据某一固定字段对 X 轴进行分组展示。示例:X 轴为销售人员,分组为销售区域

分组维度groupKeyTimeSpanstring
显示图例isLegendboolean

示例:true

图例位置legendstring

示例:"bottom"

显示坐标轴名称isXaxisNameboolean

示例:true

名称xAxisNamestring

示例:""

显示标签isXaxisAxisLabelShowboolean

示例:true

显示X轴刻度线isXaxisAxisTickShowboolean

示例:true

文字自动倾斜isXaxisAxisLabelRotateboolean

示例:false

显示网格线isYAxisSplitlineLinestyleWidthboolean

示例:true

网格线线条yAxisSplitlineLinestyleTypestring

示例:"solid"

最大值yAxisMaxnumber
最小值yAxisMinnumber
显示Y轴名称isYAxisNameboolean

示例:true

名称yAxisNamestring

示例:""

显示数值isYAxisShowboolean

数值(Y轴)字段选择

示例:true

显示数值isSeriesShowSymbolboolean

数据标签字段选择

示例:true

显示单位isUnitboolean

示例:false

数值量级unitnumber

示例:1

小数位数decimalDigitsnumber

示例:0

后缀suffixstring

示例:""

事件

高级属性

支持配置坐标轴样式、数据标签和显示单位等属性。

  • 显示单位:数值量级支持 个/十/百/千/万/十万/百万/千万/亿
  • 小数位数:支持设置 0-10 位小数。
  • 后缀:支持自定义。默认根据数量级生成 -/十/百/千/万/十万/百万/千万/亿

APIs 使用场景

当数据源配置时选择 APIs,需用户自行在 APIs 内按照参数结构定义数据,才可正常在统计卡片组件内渲染,详情请参见 图表组件参数定义

?当使用 APIs 时,数据筛选、字段选择、统计方式、统计空值属性均需用户在所建 APIs 内自行定义,其他属性与数据模型使用场景配置保持一致。

使用示例

下列示例数据源为销售业绩表。示例数据配置如下表所示。更多数据配置操作请参见 数据模型

销售姓名客户地区销售总额销售单数性别成单日期
张三北京100000032022-01-01
赵四北京200000022022-02-02
赵四上海10000012022-03-03
王五上海20000012021-04-04
王五深圳50000012021-05-05
李六北京500000062021-06-06
李六深圳20000012021-07-07

示例:月度销售总额变化趋势

  1. 新建折线图组件,进入右侧属性 > 基础属性页面,单击数据源下拉菜单,选择销售业绩表并选择统计方法。

  2. 维度(X 轴)单击字段选择下拉菜单,选择成单日期

  3. 数值(Y 轴)下,单击添加 Y 轴字段字段类型选择销售总额关系类型选择求和

  4. 下拉右侧属性,进入进阶属性内单击开启显示单位。单击数量值级下拉菜单设置为后缀项设置为万。

  5. 根据需要修改标题、坐标轴样式或图例样式等属性。

?更多示例配置可参见 柱状图

限制说明

维度轴不支持设置时间类型,可设置日期类型和日期时间类型。

常见问题

图表为什么不支持显示关联/枚举等字段的中文名称?

由于图表组件是从服务端查询获取统计数据,暂时不支持关联字段/枚举字段/选项集字段的中文显示,如果有需要精确控制图表的显示,可以使用通用图表 ,可以通过配置来实现各种灵活的展示效果。

如何灵活控制图表的各种样式,例如标题居中?

由于图表组件本身只提供了常见的配置,对于图表组件不支持配置的内容,可以尝试使用 通用图表 来实现各种灵活的展示效果。

图表组件和通用图表组件的关系

  • 通用图表 组件是一个万能的图表组件,可配置出多种图表如折线图、饼状图、面积图、地图、漏斗图、仪表盘等所有的图表。使用该组件,可实现快速引入 所有的 Echarts 图表。
  • 通用图表组件的 UI 配置更加灵活,支持基本上常见的所有的图表类型
  • 通用图表组件本身和数据无关,数据统计可以通过 Query 来实现,通过 APIs 或者 MySQL 连接器来进行数据统计,再绑定到通用图表组件上。