交互式图表渲染

DriFox 的消息卡片原生支持 ECharts 交互式图表 渲染。当 AI 输出 `` `echarts `` 代码块时，会直接渲染为可交互、可操作的图表，而不是静态图片。

一句话定义

交互式图表渲染是将 AI 生成的 ECharts JSON 配置直接转换为**浏览器级可交互图表**的能力——用户缩放、悬停、点击查看数据点，就像在专业 BI 工具中一样。

支持特性

特性	说明
🎨 ECharts 代码块	``echarts {json} ``` 自动渲染为交互式图表
🔄 暗色主题	内置 ECharts dark 主题，与界面风格统一
🖱️ 交互操作	缩放、拖拽、悬停 Tooltip、邻接高亮
📊 图表类型	折线图、柱状图、饼图、散点图、关系图(力导向)、雷达图等
🔗 DAG 工作流图	SubAgent DAG 执行时自动生成力导向节点图
📐 自适应布局	ResizeObserver 自动适配窗口大小变化
🌏 中文支持	TextDecoder 解码确保中文标签正常显示

应用场景

场景	说明
DAG 工作流可视化	节点状态实时展示（待执行/运行中/已完成/失败/跳过），颜色编码
Token 用量分析	上下文压缩前后的用量对比，环形图展示
代码统计分析	文件变更行数、模块覆盖率、语言分布
数据对比	AI 生成各类统计图表的即时展示（折线/柱状/饼图）
力导向图	代码依赖关系、函数调用链、知识图谱

端到端示例：DAG 工作流实时图表

步骤	事件	渲染行为
1	AI 调用 subagent_dag()	开始编排 DAG
2	SubAgentManager 解析 nodes + edges	生成 ECharts 力导向图配置
3	消息卡片检测 ``echarts` 代码块	调用 ECharts 渲染引擎
4	图表渲染为力导向节点图	节点颜色 = 状态（黄/蓝/绿/红/灰）
5	节点状态变化时自动更新	ECharts setOption 增量更新
6	用户悬停查看节点信息	Tooltip 显示任务进度和结果

设计哲学

为什么不用静态图片，而非要引入 ECharts？

1. AI 的输出本身就是结构化的 — LLM 回复中的分析数据天然适合图表展示，ECharts JSON 是 AI 的直接产出格式，不需要二次处理

2. 交互即理解 — 对于复杂数据（代码依赖、Token 分布），交互式图表比静态图让用户更快理解深层结构

3. 实时性 — DAG 工作流的状态变化是动态的，只有交互式图表才能做到实时更新节点状态

4. 开发者友好 — ECharts JSON 是标准格式，用户也可以手动构造图表配置，与 AI 协作生成可视化

> 交互式图表的本质：让 AI 的分析结果不再是文字描述，而是可以直接操作的视觉工具。