折线图
适用场景#
用于报表场景下展示数据随时间变化产生的趋势。
使用说明#
进入应用编辑器页面，将图表组件 > 折线图组件拖进相应容器即可。
属性#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 线条类型 | chartType | "line"|"bight" | 基础属性 | "line" | 支持折线和曲线 |
| 显示标题 | isTitle | boolean | 基础属性 | true | - |
| 图表标题 | title | string | 基础属性 | "折线图标题" | - |
| 数据源 | dataSourceType | "data-model"|"custom-connector"|"variable" | 基础属性 | "data-model" | 数据源类型选择 |
| 数据模型 | dataModel | object | 基础属性 | - | 展示模型数据的数据来源 |
| APIs | connector | object | 基础属性 | - | 展示数据的APIs来源选择 |
| 调用方法 | connectorMethod | object | 基础属性 | - | 展示数据的APIs调用方法选择 |
| 查询入参 | connectorParams | object | 基础属性 | - | 对APIs调用方法获取的数据进行筛选过滤。支持对象类型，例如 {name:'',value:''} |
| 数据筛选 | filterData | object | 基础属性 | - | 可配置数据取值范围，可参见 数据筛选配置 |
| 配色 | setColor | array | 基础属性 | ["#2A70E2","#46B690","#EDB539","#E46961","#4FB3D2","#805FDC"] | 当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡 |
| 字段选择 | xField | object | 基础属性 | - | X轴数值字段选择 |
| 统计维度 | xStatistics | string | 基础属性 | - | - |
| 显示空值坐标 | xIsCountEmpty | boolean | 基础属性 | false | - |
| 字段选择 | yField | object | 基础属性 | - | Y轴数值字段选择 |
| 分组 | groupKey | string | 基础属性 | - | 当 Y 轴仅选择一个字段时，支持根据某一固定字段对 X 轴进行分组展示。示例：X 轴为销售人员，分组为销售区域 |
| 分组维度 | groupKeyTimeSpan | string | 基础属性 | - | - |
| 显示图例 | isLegend | boolean | 基础属性 | true | - |
| 图例位置 | legend | "top"|"bottom" | 基础属性 | "bottom" | - |
| 显示坐标轴名称 | isXaxisName | boolean | 高级属性 | true | - |
| 名称 | xAxisName | string | 高级属性 | "" | - |
| 显示标签 | isXaxisAxisLabelShow | boolean | 高级属性 | true | - |
| 显示X轴刻度线 | isXaxisAxisTickShow | boolean | 高级属性 | true | - |
| 文字自动倾斜 | isXaxisAxisLabelRotate | boolean | 高级属性 | false | - |
| 显示网格线 | isYAxisSplitlineLinestyleWidth | boolean | 高级属性 | true | - |
| 网格线线条 | yAxisSplitlineLinestyleType | "solid"|"dashed"|"dotted" | 高级属性 | "solid" | - |
| 最大值 | yAxisMax | number | 高级属性 | - | - |
| 最小值 | yAxisMin | number | 高级属性 | - | - |
| 显示Y轴名称 | isYAxisName | boolean | 高级属性 | true | - |
| 名称 | yAxisName | string | 高级属性 | "" | - |
| 显示数值 | isYAxisShow | boolean | 高级属性 | true | 数值(Y轴)字段选择 |
| 显示数值 | isSeriesShowSymbol | boolean | 高级属性 | true | 数据标签字段选择 |
| 显示单位 | isUnit | boolean | 高级属性 | false | - |
| 数值量级 | unit | 1|10|100|1000|10000|100000|1000000|10000000|100000000 | 高级属性 | 1 | - |
| 小数位数 | decimalDigits | number | 高级属性 | 0 | - |
| 后缀 | suffix | string | 高级属性 | "" | - |
事件#
无高级属性#
支持配置坐标轴样式、数据标签和显示单位等属性。
- 显示单位：数值量级支持
个/十/百/千/万/十万/百万/千万/亿。 - 小数位数：支持设置
0-10位小数。 - 后缀：支持自定义。默认根据数量级生成
-/十/百/千/万/十万/百万/千万/亿。
APIs 使用场景#
当数据源配置时选择 APIs，需用户自行在 APIs 内按照参数结构定义数据，才可正常在统计卡片组件内渲染，详情请参见 图表组件参数定义。
?当使用 APIs 时，数据筛选、字段选择、统计方式、统计空值属性均需用户在所建 APIs 内自行定义，其他属性与数据模型使用场景配置保持一致。
使用示例#
下列示例数据源为销售业绩表。示例数据配置如下表所示。更多数据配置操作请参见 数据模型。
| 销售姓名 | 客户地区 | 销售总额 | 销售单数 | 性别 | 成单日期 |
|---|---|---|---|---|---|
| 张三 | 北京 | 1000000 | 3 | 男 | 2022-01-01 |
| 赵四 | 北京 | 2000000 | 2 | 男 | 2022-02-02 |
| 赵四 | 上海 | 100000 | 1 | 男 | 2022-03-03 |
| 王五 | 上海 | 200000 | 1 | 男 | 2021-04-04 |
| 王五 | 深圳 | 500000 | 1 | 男 | 2021-05-05 |
| 李六 | 北京 | 5000000 | 6 | 女 | 2021-06-06 |
| 李六 | 深圳 | 200000 | 1 | 女 | 2021-07-07 |
示例：月度销售总额变化趋势#
新建折线图组件，进入右侧属性 > 基础属性页面，单击数据源下拉菜单，选择销售业绩表并选择统计方法。
在维度（X 轴）单击字段选择下拉菜单，选择成单日期。
在数值（Y 轴）下，单击添加 Y 轴字段。字段类型选择销售总额，关系类型选择求和。
下拉右侧属性，进入进阶属性内单击开启显示单位。单击数量值级下拉菜单设置为万，后缀项设置为万。
根据需要修改标题、坐标轴样式或图例样式等属性。
?更多示例配置可参见 柱状图。
限制说明#
维度轴不支持设置时间类型，可设置日期类型和日期时间类型。