Pie chart

Applicable Scenarios

Indicates the proportion of data in the report scenario for the overall.

Usage Instructions

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

Properties

External properties received by the component

Property Name	Property Identifier	Type	Description

graph type	chartType	string	Support pie and circular, document base on pie. Example: "pie"
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
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
Display legends	isLegend	boolean	Example: true
legend position	legend	string	Example: "bottom"
display numeric value	isSeriesShowSymbol	boolean	data tag display numeric value Example: true
Display percentage	isPercent	boolean	Display percentage for data tags Example: false
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 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
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: Proportion of Sales Performance by Customer Region

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

   

2. In Dimension, click the Field Selection dropdown menu and select Customer Region.

3. Under Value, click Add Field. Select Sales Total for Field type, and select Sum for Relationship type.

4. Scroll down the right properties, go to Advanced Properties and click to enable Display Percentage. Click the Unit Scale dropdown menu and set it to 10K, set the Suffix item to 10K.

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

   

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.