用途:在 Vue 2 / Vue 3 项目中使用 Syncfusion TreeMap 组件,把树状或层级数据渲染为按权重决定大小的嵌套矩形,用于表达部分与整体的比例关系。
主要能力:基础渲染与组件注册;扁平或层级数据绑定,通过 weightValuePath 指定矩形大小字段;用 groupPath 定义多级层次,支持 Squarified、SliceAndDiceVertical、SliceAndDiceHorizontal、SliceAndDiceAuto 等布局;颜色映射含范围映射、等值映射、调色板及渐变效果;支持图例、数据标签、提示模板与格式设置;支持选择、悬停高亮、点击下钻;提供 RTL、本地化、ARIA、键盘导航等可访问性能力。
使用方式:先安装 @syncfusion/ej2-vue-treemap 并注册组件,在模板中使用 <ejs-treemap>,传入 dataSource、weightValuePath、leafItemSettings 等属性渲染基础图;高级功能需按文档注入相应模块,例如 provide('treemap', [TreeMapLegend]) 启用图例。关键属性包括 dataSource、weightValuePath、levels、leafItemSettings、colorMapping、layoutType、enableDrillDown、legendSettings、selectionSettings、highlightSettings 和 palette。
适用场景:组织架构、目录结构、区域销售、投资组合、磁盘占用、市场份额等层级占比展示。
限制:资料未提供具体版本要求、许可与收费方式、性能指标及浏览器兼容细节,使用前需另行确认;代码示例应保持原样,不修改命令与代码内容。