VueDataUI项目v2.10.11版本发布：Sankey图节点分类与图例功能升级

VueDataUI是一个基于Vue.js的数据可视化组件库，专注于提供丰富、易用且高度可定制化的数据展示解决方案。在最新发布的v2.10.11版本中，项目团队为Sankey图（桑基图）组件引入了强大的节点分类和图例支持功能，这将显著提升复杂流程数据的可视化表现力。

Sankey图节点分类体系

Sankey图常用于展示资源流动或流程转换，但当节点数量较多时，传统单一颜色的展示方式难以区分不同类型的节点。新版本通过引入nodeCategories配置项，允许开发者建立节点到类别的映射关系：

nodeCategories: {
   '采矿': '原材料',
   '铜': '组件',
   '锂': '组件',
   'PCB组装': '制造',
   '电池生产': '制造'
}

这种分类体系不仅使图表更具组织性，也为后续的视觉编码奠定了基础。开发者可以根据业务场景自由定义分类层级，比如供应链中的"原材料-组件-制造-分销"等典型环节。

视觉编码与图例交互

配合节点分类，新版本提供了nodeCategoryColors配置项，支持为每个分类指定专属颜色：

nodeCategoryColors: {
   '原材料': '#8B4513',  // 棕色代表原材料
   '组件': '#1E90FF',    // 蓝色代表组件
   '制造': '#FFD700'     // 金色代表制造
}

这种视觉编码方式使得图表阅读者能够快速识别不同类别的节点，大大提升了图表的可读性。系统会自动生成交互式图例，支持以下交互功能：

1. 高亮筛选：点击图例项会突出显示该分类下的所有节点和连接线
2. 淡化效果：非选中分类的节点会自动降低透明度
3. 状态保持：当前筛选状态会持续保持，直到用户切换或重置

样式深度定制

新版本提供了完整的图例样式控制能力，开发者可以通过style.chart.legend配置项精细调整图例的视觉表现：

style: {
    chart: {
        legend: {
            backgroundColor: "#F3F4F6",  // 背景色
            color: "#1A1A1A",           // 文字颜色
            show: true,                // 显示/隐藏
            fontSize: 14,              // 字体大小
            bold: false                // 是否加粗
        }
    }
}

这种设计既保证了开箱即用的美观性，又为专业用户提供了充分的定制空间，可以完美匹配各种设计系统的视觉规范。

技术实现亮点

从技术架构角度看，这次更新体现了几个重要的设计决策：

1. 响应式更新：分类筛选不会触发图表完全重绘，而是通过CSS过渡实现平滑的视觉变化
2. 内存优化：分类数据采用轻量级结构存储，不会显著增加内存占用
3. 无障碍支持：图例交互完全支持键盘导航和屏幕阅读器
4. TypeScript集成：所有新API都包含完整的类型定义，提供优秀的开发体验

应用场景建议

这一功能升级特别适合以下场景：

1. 供应链分析：清晰区分原材料供应商、制造商和分销商
2. 能源流动：分类显示不同能源类型（化石能源、可再生能源等）的转换过程
3. 资金流向：按机构类型（银行、基金、企业等）追踪资金路径
4. 用户行为：将用户行为按类型（浏览、点击、购买等）进行分类展示

对于需要展示复杂流程关系的业务场景，这一功能将显著提升数据洞察的效率和质量。开发者现在可以用更直观的方式呈现多层次、多类别的流动数据，帮助决策者快速把握关键信息。