4.4 进阶可视化：构建多维数据画像与 AI 关系图谱

在上一节中我们引入了 ECharts 和 Three.js 实现了惊艳的趋势折线图和 3D 数据星系。但对于一个专业的AI Data Analyzer而言这还不够。AI 强大的地方在于发现隐藏的特征维度与复杂网络关系。本节我们将继续深挖 ECharts 的潜力在 Dashboard 中补充两种极具业务价值的进阶图表多维特征雷达图 (Radar)和AI 知识关系图谱 (Force-directed Graph)。源码地址https://github.com/you-want/ai-data-analyzer欢迎 star, 支持一波。1. 雷达图呈现用户群体多维画像在数据分析中我们经常需要对不同类型的用户或商品进行全方位的对比评估。比如经过 AI 聚类分析后得出的“核心高净值用户”与“高潜社交活跃用户”在多个维度上的差异。此时雷达图是最好的选择。我们在frontend/src/components/charts/目录下新建UserRadarChart.tsxuse client; import React, { useMemo } from react; import ReactECharts from echarts-for-react; export default function UserRadarChart() { const isDark false; // 实际可接入 next-themes const option useMemo(() ({ backgroundColor: transparent, tooltip: {}, legend: { data: [核心高净值用户, 高潜社交活跃用户], bottom: 0, textStyle: { color: isDark ? #A1A1AA : #4B5563 } }, radar: { indicator: [ { name: 消费力 (Spends), max: 100 }, { name: 活跃度 (Activity), max: 100 }, { name: 忠诚度 (Loyalty), max: 100 }, { name: 转化率 (Conversion), max: 100 }, { name: 社交影响力 (Social), max: 100 } ], splitArea: { areaStyle: { color: isDark ? [#27272A, #18181B] : [#F9FAFB, #F3F4F6], } } }, series: [{ name: 用户群体多维画像, type: radar, data: [ { value: [85, 90, 80, 75, 60], name: 核心高净值用户, itemStyle: { color: #3B82F6 }, // 蓝色 areaStyle: { opacity: 0.3 } }, { value: [50, 60, 45, 40, 85], name: 高潜社交活跃用户, itemStyle: { color: #10B981 }, // 绿色 areaStyle: { opacity: 0.3 } } ] }] }), [isDark]); return ( div classNamebg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-zinc-800 flex flex-col h-full h3 classNametext-lg font-semibold text-gray-800 dark:text-zinc-100 mb-1群体多维特征画像 (Radar)/h3 div classNameflex-1 min-h-[300px] ReactECharts option{option} style{{ height: 100%, width: 100% }} / /div /div ); }2. 关系图谱揭示隐藏的业务脉络AI 分析的另一大杀器是知识图谱。例如用户、商品、营销活动之间存在着错综复杂的联系。使用 ECharts 的graph图表结合force物理力导向布局我们可以直观地将这种网状结构可视化出来。新建KnowledgeGraphChart.tsxuse client; import React, { useMemo } from react; import ReactECharts from echarts-for-react; export default function KnowledgeGraphChart() { const isDark false; const option useMemo(() ({ backgroundColor: transparent, tooltip: { formatter: {b} }, series: [ { type: graph, layout: force, // 核心使用力导向布局 roam: true, // 允许鼠标拖拽和滚轮缩放 symbolSize: 50, label: { show: true, position: right }, edgeSymbol: [circle, arrow], // 连线带有箭头 force: { repulsion: 300, // 节点间的斥力因子 edgeLength: [50, 150] // 连线的长度范围 }, data: [ { name: 旗舰手机, symbolSize: 60, itemStyle: { color: #3B82F6 } }, { name: 降噪耳机, symbolSize: 40, itemStyle: { color: #10B981 } }, { name: 年轻极客, symbolSize: 70, itemStyle: { color: #8B5CF6 } }, { name: 商务精英, symbolSize: 50, itemStyle: { color: #EC4899 } } ], links: [ { source: 年轻极客, target: 旗舰手机, value: 偏好购买 }, { source: 商务精英, target: 旗舰手机, value: 商务复购 }, { source: 商务精英, target: 降噪耳机, value: 刚需配件 }, ], lineStyle: { opacity: 0.7, width: 1.5, curveness: 0.1 } // 略微弯曲的连线 } ] }), [isDark]); return ( div classNamebg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-zinc-800 flex flex-col h-full h3 classNametext-lg font-semibold text-gray-800 dark:text-zinc-100 mb-1AI 知识图谱与实体关系 (Graph)/h3 div classNameflex-1 min-h-[300px] ReactECharts option{option} style{{ height: 100%, width: 100% }} / /div /div ); }3. 终极奥义“Chat-to-Chart” 动态渲染在我们的项目中这两个图表的数据目前是写死的。但在真实的 AI Agent 系统中ECharts 最大的优势在于它的配置项 (option) 是一个纯 JSON 对象。这意味着我们可以直接通过 Prompt 让后端的 Nest.js AI Agent 动态生成这个 JSON流程如下用户输入“请对比一下华东区和华南区的用户特征差异”。后端大模型解析意图从数据库提取数据并构造出适合展示雷达图的 ECharts JSON 对象。前端接收到这个 JSON直接赋值给ReactECharts option{aiGeneratedOption} /。“对话即生成图表” (Chat-to-Chart)这才是下一代 AI 智能分析仪表盘的终极形态在后续的章节中我们将探索如何打通前后端实现这种令人惊叹的动态渲染体验。