用途
Syncfusion Vue Accumulation Chart 是 Syncfusion Vue UI 组件技能中的一个专题,用于在 Vue 应用中实现“累积型”图表,也就是以整体与部分关系为核心的数据可视化形式。它面向需要展示分类占比、层级流程或阶段转化的场景,覆盖饼图(Pie)、圆环图(Doughnut)、漏斗图(Funnel)、金字塔图(Pyramid)以及半饼图(Semi-Pie)等图表类型。
主要能力
技能资料说明该组件支持以下方向:
- 图表类型:饼图、圆环图、漏斗图、金字塔图,以及可自定义起止角度的半饼图。
- 数据绑定:通过
dataSource、xName、yName绑定分类与数值字段,并支持动态数据更新。 - 数据标签:可启用和定位数据标签,支持格式化、模板、智能放置、旋转、文本换行与连接线配置。
- 图例配置:支持显示与定位图例、对齐方式(上/下/左/右)、尺寸、形状与图标、分页导航、文本换行、点击动画和自定义模板。
- 交互与高级功能:多级下钻、点与系列事件、工具提示、注释与标记、颜色映射、打印与导出选项。
- 无障碍支持:资料提到 WCAG 2.2 与 Section 508 合规、键盘导航、屏幕阅读器(ARIA 属性)、从右到左(RTL)渲染和颜色对比标准。
使用方式
技能文档给出 Quick Start 示例:在 Vue 模板中使用 ejs-accumulationchart、e-accumulation-series-collection、e-accumulation-series 组件标签,并在组件中通过 provide 注入对应的系列类型(如 PieSeries)。示例包含数据数组 chartData、字段绑定 xName/yName,以及样式中的容器高度设置。
文档还列出常见配置模式:通过 provide 选择图表类型;使用 innerRadius 创建圆环图;使用 dataLabel 的 position、connectorStyle 控制标签位置与连接线;使用 legendSettings 的 position、alignment 配置图例;通过 pointColorMapping 将数据字段映射到颜色。
常用方法示例包括 export('PNG', 'chart.png')、export('PDF', 'chart.pdf')、print()、setAnnotationValue(0, '<p>New Content</p>')、calculateBounds() 等。常用事件包括生命周期事件 load、loaded,渲染事件 seriesRender、pointRender、textRender,交互事件 chartMouseClick、pointClick、selectionComplete、legendClick,显示相关事件 tooltipRender、animationComplete,以及导出事件 beforeExport、afterExport。
适用场景
资料中列出的典型用例包括:市场份额饼图(浏览器市场份额、按地区销售额等)、漏斗分析(销售管道、用户转化漏斗)、多级下钻(点击饼图扇区进入子分类)、仪表盘 KPI 可视化(圆环中心标签、颜色映射、响应式尺寸)。
限制
该技能的资料以参考文档导航与代码片段为主,具体安装命令、依赖版本、官方文档 URL、收费与价格、平台限制等信息在资料中暂未提供,需以实际项目与官方文档为准。