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：

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：

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>
  );
}

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 智能分析仪表盘的终极形态！在后续的章节中，我们将探索如何打通前后端，实现这种令人惊叹的动态渲染体验。