用途
该技能面向在 React 应用中实现 Syncfusion 3D 圆形图表组件（CircularChart3D）的场景，主要用于饼图和环形图的三维可视化，展示比例型数据。适用场景包括市场份额、销售分布、预算分配、调查结果、投资组合构成、时间分配等。
主要能力
- 饼图与环形图：提供带 3D 深度的经典圆形可视化，可通过 innerRadius 属性创建环形图。
- 数据绑定：通过 xName 和 yName 将数据源字段映射到图表系列。
- 交互功能：支持工具提示、图例与点击事件。
- 可视化定制：支持数据标签、颜色、半径配置（radius 默认为容器的 80%）。
- 数据标签：可开启显示、注入 CircularChartDataLabel3D 模块、自动排列避免重叠、位置置于内部或外部、支持自定义模板、文本格式与样式、连接线配置、字体定制。
- 图例：可注入 CircularChartLegend3D 模块，支持左、右、上、下位置，center/far/near 对齐，反转顺序，分页，形状与标记定制，样式与点击行为配置。
- 工具提示：可注入 CircularChartTooltip3D 模块，支持自定义标题、格式字符串占位符、模板、显示系列名与点值、外观样式及基于事件的定制。
- 空值处理：通过 emptyPointSettings 配置 null/undefined 值，模式包括 Gap、Average、Drop、Zero，并可自定义空值填充颜色。
- 标题与副标题：通过 title 和 subTitle 属性添加，支持位置对齐、样式定制与组合使用。
- 打印与导出：可从浏览器直接打印，导出为 JPEG、PNG、SVG 图像格式，或通过 pdfExport 方法导出为 PDF，支持指定导出类型与文件名。
使用方式
需安装 @syncfusion/ej2-react-charts 包，导入所需 CSS 主题，并在组件中通过 <Inject services={[...]} /> 注入所需模块。必需的模块包括：PieSeries3D（核心饼图/环形图功能）、CircularChartDataLabel3D（数据标签）、CircularChartLegend3D（图例）、CircularChartTooltip3D（工具提示）、CircularChart3DExport（图片导出）、CircularChart3DPdfExport（PDF 导出）。
快速开始示例：
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D, Inject } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; function App() { const circularData = [ { x: 'Chrome', y: 62.92 }, { x: 'Internet Explorer', y: 6.12 }, { x: 'Opera', y: 3.15 }, { x: 'Edge', y: 5.5 }, { x: 'Safari', y: 19.97 }, { x: 'Others', y: 2.34 } ]; return <CircularChart3DComponent id='charts' title='Browser Market Shares in November 2023' tilt={-45} legendSettings={{ visible: true, position: 'Right' }}> <Inject services={[PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]} /> <CircularChart3DSeriesCollectionDirective> <CircularChart3DSeriesDirective dataSource={circularData} xName='x' yName='y' dataLabel={{ visible: true, position: 'Outside', name: 'x', font: { fontWeight: '600' }, connectorStyle: { length: '40px' } }}> </CircularChart3DSeriesDirective> </CircularChart3DSeriesCollectionDirective> </CircularChart3DComponent>; } export default App; const root = ReactDOM.createRoot(document.getElementById('charts')); root.render(<App />);
常用配置片段：
创建环形图： <CircularChart3DSeriesDirective dataSource={data} xName="category" yName="value" innerRadius="40%" radius="80%" />
添加数据标签： import { CircularChartDataLabel3D } from '@syncfusion/ej2-react-charts'; <CircularChart3DComponent> <Inject services={[PieSeries3D, CircularChartDataLabel3D]} /> <CircularChart3DSeries> <CircularChart3DSeriesDirective dataSource={data} xName="x" yName="y" dataLabel={{ visible: true, position: 'Outside' }} /> </CircularChart3DSeries> </CircularChart3DComponent>
启用图例与工具提示： import { CircularChartLegend3D, CircularChartTooltip3D } from '@syncfusion/ej2-react-charts'; <CircularChart3DComponent legendSettings={{ visible: true, position: 'Bottom' }} tooltip={{ enable: true, format: '${point.x}: ${point.y}' }}
<Inject services={[PieSeries3D, CircularChartLegend3D, CircularChartTooltip3D]} /> </CircularChart3DComponent>
处理空值： <CircularChart3DSeriesDirective dataSource={dataWithNulls} xName="category" yName="value" emptyPointSettings={{ mode: 'Average', fill: '#cccccc' }} />
关键属性：CircularChart3DComponent 支持 title、subTitle、legendSettings、tooltip、enableExport、width/height 等；CircularChart3DSeriesDirective 支持 dataSource、xName、yName、radius、innerRadius、dataLabel、emptyPointSettings、pointColorMapping 等。
适用场景与限制
适用场景包括销售分布仪表盘、预算分配、调查结果、投资组合构成、时间分配等比例数据的可视化。限制方面：资料未提供收费、价格、平台兼容性细节及性能上限等信息；图表渲染依赖正确安装包、导入 CSS 主题并注入所需模块，数据源需为格式正确的数组。若图表未渲染，可检查是否安装 @syncfusion/ej2-react-charts、是否导入 CSS 主题、数据源格式以及是否注入 PieSeries3D 模块。数据标签重叠时可使用 position: 'Outside' 或调整字体大小与模板。导出不工作时需注入 CircularChart3DExport 或 CircularChart3DPdfExport 模块，并设置 enableExport: true。