bar chart

Applicable Scenarios

Data size comparison for report scenario.

Usage Instructions

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

Properties

External properties received by the component

Property Name	Property Identifier	Type	Description

histogram orientation	directionType	string	Support horizontal and vertical. The vertical dimension is the X-axis, and the numeric value is the Y-axis, and conversely for horizontal. This document uses vertical as the attribute setting example. Example: "lengthways"
Whether to stack	isPile	boolean	This property takes effect only when multiple Y-axes exist Example: false
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
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) display numeric value Example: true
display numeric value	isSeriesShowSymbol	boolean	data tag display numeric value 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: ""
Data source	dataSourceType	string	Data source type selection Example: "data-model"
data model	dataModel	object	Show model data source
data source variable	datasourceVariable	array	data source variable
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"

Events

None

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
Zhang San	Beijing	1000000	3	Male
Zhao Si	Beijing	2000000	2	Male
Zhao Si	Shanghai	100000	1	Male
Wang Wu	Shanghai	200000	1	Male
Wang Wu	Shenzhen	500000	1	Male
Li Liu	Beijing	5000000	6	Female
Li Liu	Shenzhen	200000	1	Female

Example 1: Comparison of Total Sales Performance by Salesperson (Vertical)

1. Create a new Bar 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.

   

2. In Dimension (X-axis), click the Field Selection drop-down menu and select Sales Name.

   

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

   

4. 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.

   

5. Modify the title, axis styles, legend style, and other properties as needed. The final result is shown in the figure below:

   

Example 2: Comparison of Total Sales Performance by Salesperson (Vertical) - by Region

Based on the configuration of [Example 1], add a grouping field by clicking the Group drop-down menu and selecting Customer Region.

Final Effect Display:

Click to enable the Stacking function to view the stacking effect:

Example 3: Comparison of Total Sales Performance by Salesperson (Vertical) - Viewing Only Data for Male Gender

1. Based on the configuration of [Example 1], click Data Filter.

   

2. Set the corresponding data filter parameters, and click OK to add the filter condition.

   

Example 4: Comparison of "Number of Customer Coverage Regions" and "Total Sales Orders" by Salesperson (Horizontal)

1. Click Bar Chart Orientation and select Horizontal.

   

2. In Dimension (Y-axis), click the Field Selection drop-down menu and select Sales Name.

3. Under Value (X-axis), click Add Field to add the following two fields:

• Field 1: Customer Region; Statistical Method: Count
• Field 2: Number of Sales Orders; Statistical Method: Sum

3. Final Effect Display:

   

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.