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

Usage Instructions
Go to the Application Editor page, then drag the Chart Components > Line Chart component into the corresponding container.
Properties
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
---|
线条类型 | chartType | string | 支持折线和曲线 示例:"line" |
显示标题 | isTitle | boolean | 示例:true |
图表标题 | title | string | 示例:"折线图标题" |
数据源 | dataSourceType | string | 数据源类型选择 示例:"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 | string | 示例:"bottom" |
显示坐标轴名称 | isXaxisName | boolean | 示例:true |
名称 | xAxisName | string | 示例:"" |
显示标签 | isXaxisAxisLabelShow | boolean | 示例:true |
显示X轴刻度线 | isXaxisAxisTickShow | boolean | 示例:true |
文字自动倾斜 | isXaxisAxisLabelRotate | boolean | 示例:false |
显示网格线 | isYAxisSplitlineLinestyleWidth | boolean | 示例:true |
网格线线条 | yAxisSplitlineLinestyleType | string | 示例:"solid" |
最大值 | yAxisMax | number | |
最小值 | yAxisMin | number | |
显示Y轴名称 | isYAxisName | boolean | 示例:true |
名称 | yAxisName | string | 示例:"" |
显示数值 | isYAxisShow | boolean | 数值(Y轴)字段选择 示例:true |
显示数值 | isSeriesShowSymbol | boolean | 数据标签字段选择 示例:true |
显示单位 | isUnit | boolean | 示例:false |
数值量级 | unit | number | 示例:1 |
小数位数 | decimalDigits | number | 示例:0 |
后缀 | suffix | string | 示例:"" |
Events
无Advanced Properties
It supports configuring axis styles, data labels, display units, and other properties.
- Display unit: Numerical magnitude supports
unit/ten/hundred/thousand/ten thousand/hundred thousand/million/ten million/hundred million
. - Decimal places: Supports
0-10
decimal places. - Suffix: Supports customization. By default, it is generated based on the numerical magnitude as
-/ten/hundred/thousand/ten thousand/hundred thousand/million/ten million/hundred million
.
APIs Usage Scenarios
When selecting APIs as the data source during configuration, users need to define data within the APIs according to the parameter structure to ensure proper rendering in the statistical card component. For details, refer to Chart Component Parameter Definitions.
? When using APIs, properties such as data filtering, field selection, statistical method, and null value statistics must be defined by the user within the created APIs. Other properties remain consistent with the configuration in the data model usage scenario.
Usage Example
The following example data source is a sales performance table. The example data configuration is shown in the table below. For more data configuration operations, refer to Data Model.
Sales Name | Customer Region | Total Sales | Order Count | Gender | Order Date |
---|---|---|---|---|---|
Zhang San | Beijing | 1000000 | 3 | Male | 2022-01-01 |
Zhao Si | Beijing | 2000000 | 2 | Male | 2022-02-02 |
Zhao Si | Shanghai | 100000 | 1 | Male | 2022-03-03 |
Wang Wu | Shanghai | 200000 | 1 | Male | 2021-04-04 |
Wang Wu | Shenzhen | 500000 | 1 | Male | 2021-05-05 |
Li Liu | Beijing | 5000000 | 6 | Female | 2021-06-06 |
Li Liu | Shenzhen | 200000 | 1 | Female | 2021-07-07 |
Example: Monthly Total Sales Change Trend
Create a new Line Chart component, go to the Properties > Basic Properties page on the right, click the Data Source drop-down menu, select Sales Performance Table, and choose a Statistical method.
In Dimension (X-axis), click the Field Selection drop-down menu and select Order Date.
Under Value (Y-axis), click Add Y-axis Field. For Field type, select Total Sales; for Relationship type, select Sum.
Scroll down the right-side properties, enter the Advanced Properties section, and click to enable Display Unit. Click the Quantity Level drop-down menu and set it to 10,000, then set the Suffix item to 10,000.
Modify the title, axis styles, legend style, and other properties as needed.
Tip: For more example configurations, refer to Bar Chart.
Limitation Description
The dimension axis does not support setting the time type, but supports setting the date type and datetime type.
Frequently Asked Questions
Why doesn't the chart support displaying Chinese names for fields such as association/enumeration?
Since the chart component retrieves statistical data by querying from the server-side, it currently does not support displaying Chinese names for association fields/enumeration fields/option set fields. If you need precise control over chart display, you can use the Universal Chart, which allows achieving various flexible display effects through configuration.
How to flexibly control various styles of the chart, such as centering the title?
Since the chart component itself only provides common configurations, for content that cannot be configured in the chart component, you can try using the Universal Chart to achieve various flexible display effects.
Relationship Between Chart Component and Universal Chart Component
- The Universal Chart component is a versatile chart component that can be configured to generate various charts such as line charts, pie charts, area charts, maps, funnel charts, dashboards, and all other chart types. Using this component enables quick integration of all Echarts charts.
- The UI configuration of the Universal Chart component is more flexible, supporting virtually all common chart types.
- The Universal Chart component itself is independent of data. Data statistics can be achieved through Query, which is performed via APIs or MySQL connectors, and then bound to the Universal Chart component.