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.tsx：

"use 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 className="bg-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 className="text-lg font-semibold text-gray-800 dark:text-zinc-100 mb-1">群体多维特征画像 (Radar)</h3> <div className="flex-1 min-h-[300px]"> <ReactECharts option={option} style={{ height: '100%', width: '100%' }} /> </div> </div> ); }

2. 关系图谱：揭示隐藏的业务脉络

AI 分析的另一大杀器是知识图谱。例如，用户、商品、营销活动之间存在着错综复杂的联系。使用 ECharts 的graph图表结合force物理力导向布局，我们可以直观地将这种网状结构可视化出来。

新建KnowledgeGraphChart.tsx：

"use 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 className="bg-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 className="text-lg font-semibold text-gray-800 dark:text-zinc-100 mb-1">AI 知识图谱与实体关系 (Graph)</h3> <div className="flex-1 min-h-[300px]"> <ReactECharts option={option} style={{ height: '100%', width: '100%' }} /> </div> </div> ); }