Pie chart

适用场景

用于报表场景下表示数据在总体中的占比。

Usage Instructions

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

Properties

组件接收的外部传入的属性

属性名	属性标识	类型	说明

图形类型	chartType	string	支持饼形和环形，本文以饼形为例 示例："pie"
显示标题	isTitle	boolean	示例：true
图表标题	title	string	示例："柱状图标题"
数据源	dataSourceType	string	数据源类型选择 示例："data-model"
数据模型	dataModel	object	展示模型数据的数据来源
数据源变量	datasourceVariable	array	数据源变量
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轴数值字段选择
显示图例	isLegend	boolean	示例：true
图例位置	legend	string	示例："bottom"
显示数值	isSeriesShowSymbol	boolean	数据标签显示数值 示例：true
显示百分比	isPercent	boolean	数据标签显示百分比 示例：false
显示单位	isUnit	boolean	示例：false
数值量级	unit	number	示例：1
小数位数	decimalDigits	number	示例：0
后缀	suffix	string	示例：""

Events

无

Advanced Properties

It supports configuring 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: Sales Performance Share by Customer Region

1. Create a new Pie 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 Dimensions, click the Field Selection drop-down menu and select Customer Region.

3. Under Value, click Add Field. For Field type, select Total Sales; for Relationship type, select Sum.

4. Scroll down the right-side properties, enter Advanced Properties, and click to enable Display Percentage. 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:

   

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.