line chart

Applicable Scenarios

Display data trend changes over time for report scenario.

Usage Instructions

Go to the Application Editor page, then drag the Chart Component > Line Chart component into the corresponding container.

Properties

External properties received by the component

Property Name	Property Identifier	Type	Description

line type	chartType	string	Support line and curve Example: "line"
Display Headlines	isTitle	boolean	Example: true
chart title	title	string	Example: "折线图标题"
data filter	filterData	object	Configurable data value ranges, see data filtering configuration
color scheme	setColor	array	When multiple numerical or dimensional field groups exist, different categories are shown based on different color schemes, supporting customizable color palettes. Example: [ "#2A70E2", "#46B690", "#EDB539", "#E46961", "#4FB3D2", "#805FDC" ]
Display null coordinates	xIsCountEmpty	boolean	Example: false
Data source	dataSourceType	string	Data source type selection Example: "data-model"
data model	dataModel	object	Show model data source
APIs	connector	object	Data display APIs source selection
calling method	connectorMethod	object	The input/output parameters of the method must meet the component requirements. View the document (https://cloud.tencent.com/document/product/1301/71197#.E6.9F.B1.E7.8A.B6.E5.9B.BE.E3.80.81.E6.8A.98.E7.BA.BF.E5.9B.BE.E3.80.81.E9.A5.BC.E5.9B.BE) API invocation method selection for displaying data
Query input parameters	connectorParams	object	对APIs调用方法获取的数据进行筛选过滤。支持对象类型，例如 {name:'',value:''}
field selection	xField	object	X-axis value field selection
Statistical dimension	xStatistics	string
field selection	yField	object	Numeric value (Y-axis) field selection
group	groupKey	string	When only one field is selected for the Y-axis, the X-axis can be grouped by a fixed field. Example: X-axis shows salesperson, grouped by sales region.
grouping dimension	groupKeyTimeSpan	string
Display legends	isLegend	boolean	Example: true
legend position	legend	string	Example: "bottom"
Display axis name	isXaxisName	boolean	Example: true
Name	xAxisName	string	Example: ""
Display tag	isXaxisAxisLabelShow	boolean	Example: true
Display X-axis scale	isXaxisAxisTickShow	boolean	Example: true
Text auto skew	isXaxisAxisLabelRotate	boolean	Example: false
Display grid lines	isYAxisSplitlineLinestyleWidth	boolean	Example: true
grid lines line	yAxisSplitlineLinestyleType	string	Example: "solid"
Maximum value	yAxisMax	number
Minimum value	yAxisMin	number
Display Y-axis name	isYAxisName	boolean	Example: true
Name	yAxisName	string	Example: ""
display numeric value	isYAxisShow	boolean	Numeric value (Y-axis) field selection Example: true
display numeric value	isSeriesShowSymbol	boolean	Data Tag field selection Example: true
display unit	isUnit	boolean	Example: false
Numeric value magnitude	unit	number	Example: 1
number of decimal places	decimalDigits	number	Example: 0
suffix	suffix	string	Example: ""

Events

None

Advanced Properties

Supports configuration of axis styles, data labels, display units, and other properties.

• Display unit: supports numerical magnitudes such as units/tens/hundreds/thousands/ten thousands/hundred thousands/millions/ten millions/hundred millions.
• Decimal places: supports setting 0-10 decimal places.
• Suffix: supports customization. By default, it is generated based on magnitude: -/tens/hundreds/thousands/ten thousands/hundred thousands/millions/ten millions/hundred millions.

API Use Cases

When APIs are selected as the data source during configuration, users must define data within the APIs according to the parameter structure for proper rendering in the statistical card component. For details, see Chart Component Parameter Definition.

?When using APIs, data filtering, field selection, statistical methods, and statistical properties for null values all need to be defined by the user within the created APIs. Other properties remain consistent with the configuration of 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, please refer to Data Model.

Salesperson Name	Customer Region	Total Sales	Number of Orders	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

1. Create a new Line Chart component, go to the Properties > Basic Properties page on the right, click the Data Source dropdown menu, select the Sales Performance Table, and choose the Aggregation method.

   

2. In Dimension (X-axis), click the Field Selection dropdown menu and select Order Date.

   

3. Under Value (Y-axis), click Add Y-axis Field. Select Sales Total for Field type, and select Sum for Relationship type.

   

4. In the properties panel on the right, navigate to Advanced Properties, then click to enable Display Unit. Click the Quantity Level dropdown menu and set it to Ten Thousand, and set the Suffix item to Ten Thousand.

   

5. Modify properties such as the title, axis style, or legend style as needed.

? For more example configurations, refer to Bar Chart.

Limits Description

The dimension axis does not support setting the time type, but you can set the date type and datetime type.

Frequently Asked Questions

The reason why charts do not support displaying Chinese names for association/enumeration fields

Since the chart component retrieves statistical data by querying the server, it currently does not support displaying Chinese names for association/enumeration/option set fields. If you need precise control over chart display, you can use the Universal Chart, which allows flexible display configurations through customization.

How to flexibly control various chart styles, such as centering the title?

Since the chart component itself only provides common configurations, for elements that cannot be configured within the chart component, you can use 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 capable of configuring 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 data-agnostic. Data statistics can be achieved through Query, where data aggregation is performed via APIs or the MySQL connector, and then bound to the Universal Chart component.