Statistical Card
#
适用场景提供报表场景下的指标数据统计并展示功能。

Usage Instructions
Data Model Use Cases
- Set the data source for the statistical card, select the pre-built data model, and select the data source method as statistical.
- Configure the data value range through data filtering. For details, refer to the Data Filtering Configuration Document.
- Select the fields to be analyzed statistically.
- Configure the statistical method for the selected field(s). Currently, "Number" type fields support count, sum, maximum, minimum, and average; other type fields only support count.
- Select whether to count null values; by default, null values are not counted.
- Supports display unit settings. Numerical magnitude: 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
.
Properties
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
---|
数据源 | dataSource | object | |
数据筛选 | filterData |
| |
字段选择 | field | string | |
统计方式 | operationType | string | |
字段展示名称 | label | string | 示例:"今日活跃用户数" |
是否统计空值 | isCountEmpty | boolean | 示例:false |
是否显示单位 | isShowUnit | boolean | 示例:true |
数值量级 | unit | number | 示例:1 |
小数位数 | decimalDigits | number | 示例:0 |
后缀 | suffix | string |
Events
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
点击 | tap | 兼容三端 | - |
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.
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.