SuperAPI AI 工具集

syncfusion-vue-3d-circular-chart

前端与建站

查看项目

更新于 10-16 04:49

技能介绍

用途

Syncfusion Vue 3D Circular Chart 用于在 Vue 应用中创建带 3D 透视效果的饼图(Pie)与环形图(Donut),适合展示部分与整体的比例关系,例如销售构成、市场份额等。该技能本身是一套使用指引,核心目标是在用户需要以圆形/饼图形式可视化数据时,提供可直接参考的配置方式与代码示例。

主要能力

根据资料,该组件支持以下能力:

  • 饼图与环形图:饼图渲染与配置;环形图通过 innerRadius 设置内圈大小;半径(radius)可自定义,例如 '80%'。
  • 数据标签(Data Labels):可启用与定位标签,支持文本格式化与模板、连接线以及样式设置,也可通过事件实现自定义格式化,例如设置 format: 'n2' 保留两位小数,position 可为 'Outside' 或 'Inside'。
  • 图例(Legend):控制显示与定位(如 position: 'Right')、对齐与换行、点击事件与选择,以及图例自定义。
  • 工具提示(Tooltip):可启用并自定义,支持自定义模板与格式化,例如格式 '${point.x}: ${point.y}%'。
  • 交互能力:工具提示、点击处理器与选择行为;数据点渲染事件可用于逐点自定义(如根据点名称高亮指定扇区)。
  • 数据绑定:通过 dataSource 绑定数据,xName 指定分类字段、yName 指定数值字段,可结合 Vue 响应式动态更新数据。
  • 高级功能:空点(Empty point)处理、3D 视角旋转(tilt,取值范围 -90 到 90)、动画配置,以及打印与导出为 PDF/PNG。

使用方式

该技能以参考资料文档加代码片段组织,导航结构如下:

  • getting-started.md:安装与包设置、模块注册、Vue 2 与 Vue 3 语法差异、基础饼图创建、第一个 3D 圆形图。
  • pie-and-donut.md:饼图渲染与配置、带内径的环形图、半径自定义与动态半径、颜色与文本映射。
  • data-labels.md:启用与定位数据标签、文本格式化与模板、连接线与样式、基于事件的自定义格式化。
  • legend-and-navigation.md:图例可见性与定位、对齐与换行、点击事件与选择、图例自定义。
  • tooltips-and-interactivity.md:工具提示启用与自定义、自定义提示模板、点选择与事件、点渲染与自定义。
  • advanced-features.md:空点处理、3D 视图旋转(tilt)、动画配置、打印与导出。

使用流程上,需先注册必要模块:饼图系列需提供 PieSeries3D,例如 provide('circularchart3d', [PieSeries3D]);按需追加 CircularChartDataLabel3D(数据标签)、CircularChartLegend3D(图例)、CircularChartTooltip3D(工具提示)。然后在模板中使用 ejs-circularchart3d 容器,配合 e-circularchart3d-series-collection 与 e-circularchart3d-series 声明系列。

关键属性速查

属性 类型 用途
dataSource Array 图表数据点
xName String x 值(分类)数据字段
yName String y 值(数值)数据字段
radius String 饼图半径(如 '80%')
innerRadius String 环形图内圈大小(如 '40%')
dataLabel Object 标签配置
tilt Number 3D 旋转角度(-90 到 90)
legendSettings Object 图例配置
tooltip Object 工具提示配置

适用场景

适合需要在 Vue 项目中以饼图或环形图呈现比例数据的场景,例如报表、仪表板与数据分析应用;当需要数据标签、图例、工具提示、点击选择、逐点样式自定义、3D 视角调整或导出 PDF/PNG 时,均可参考对应章节。

限制与未知信息

资料中提供了 Vue 2 与 Vue 3 两种示例写法(Vue 3 使用 script setup 与 provide),但未提供具体安装命令、包版本、收费与授权方式、浏览器兼容性、性能上限等信息,这些未在现有资料中说明。使用时需自行确认所用 Syncfusion 包的可用性与授权要求。