AVW-3：数据可视化全景——ECharts、AntV、Plotly、Bokeh、Observable 等 15+ 工具
AI 动态视觉 Web 专题 全景地图 | 动画引擎 | AVW-3 数据可视化 ← 本文 | 交互叙事 | AI 生成 UI | 视频与动效 | 程序化三剑客 | 中国生态 | 视觉指南
# 数据可视化工具全景
## 通用图表
- ECharts (Apache, 60k★)
- Plotly (交互工业标准)
- G2 (图形语法)
- Bokeh (大数据渲染)
## 专项可视化
- G6 (知识图谱)
- X6 (流程图/DAG)
- L7 (地理空间)
- Pyvis (网络图)
## 高维 & ML
- HiPlot (平行坐标)
- Yellowbrick (ML诊断)
- AVA (AI推荐)
## 探索 & 叙事
- PyGWalker (拖拽探索)
- Observable (数据叙事)
- Flourish (无代码故事)
1. ECharts — Apache 顶级，中国可视化事实标准
- 官网: echarts.apache.org
- GitHub: apache/echarts · 60k+ stars
- 许可: Apache 2.0
- 起源: 百度 EFE 团队，2018 年捐赠 Apache
- 代表用户: 阿里巴巴、腾讯、百度、华为、字节跳动
const chart = echarts.init(document.getElementById('main'))
chart.setOption({
xAxis: { data: ['响应速度', '准确率', '创造性'] },
series: [{ type: 'radar', data: [{ value: [90, 95, 85] }] }]
})ECharts vs Plotly vs Bokeh:
| 维度 | ECharts | Plotly | Bokeh |
|---|---|---|---|
| 图表种类 | ★★★★★ (60+) | ★★★★ | ★★★ |
| 移动端 | ★★★★★ | ★★★ | ★★ |
| 大数据量 | ★★★★ (增量渲染) | ★★★ | ★★★★★ (服务端) |
| 定制深度 | ★★★★★ | ★★★★ | ★★★★ |
| 中文文档 | ★★★★★ | ★★★ | ★★ |
| 3D 能力 | ★★★★ (ECharts GL) | ★★ | — |
AI 场景: 模型评估雷达图、实时推理监控（WebSocket 增量更新）、注意力热力图、知识图谱（graph/force 类型）。
2. AntV — 蚂蚁集团可视化七件套
G2 — 图形语法引擎
- 官网: g2.antv.antgroup.com
- GitHub: antvis/G2 · 12k+ stars
- 对标: R 语言 ggplot2
- 特色: 数据字段 → 视觉通道（位置/颜色/大小/形状）的映射
chart.point().data(embeddingResults)
.encode('x', 'pca_dim1').encode('y', 'pca_dim2')
.encode('color', 'cluster').encode('size', 'confidence')G6 — 图可视化引擎
- 官网: g6.antv.antgroup.com
- GitHub: antvis/G6 · 11k+ stars
- 对标: vis.js、Pyvis、Cytoscape.js
- 特色: WebGL 大数据模式、力导向布局、插件体系
G6 vs Pyvis: G6 大数据量更优（WebGL 模式），定制能力更强；Pyvis 更轻量，Python 调用更方便。
X6 — 流程图/图编辑器
- 官网: x6.antv.antgroup.com
- GitHub: antvis/X6 · 6k+ stars
- 对标: draw.io、LogicFlow
- 特色: 拖拽节点+连线+编辑 = 可视化 AI Pipeline 编辑器的基础
L7 — 地理空间可视化
- 官网: l7.antv.antgroup.com
- GitHub: antvis/L7 · 4k+ stars
- 特色: WebGL 渲染，内置高德地图，全球推理请求地理分布
AVA — AI 驱动的可视化推荐（重点）
- 官网: ava.antv.antgroup.com
- GitHub: antvis/AVA
- 核心价值: 输入数据 + 分析目的 → AI 推荐最佳图表类型（带置信度分数）
const advisor = new Advisor()
const results = advisor.advise({ data, options: { purpose: 'Comparison' } })
// → [{ type: 'grouped_column_chart', score: 0.95 }, ...]**这代表了可视化从"手动配置"到"AI 推荐"的范式转变。**当 AI 应用输出分析结果时，AVA 替你做"用折线图还是柱状图"的决策。
3. Plotly — 交互图表的工业标准
- 官网: plotly.com
- GitHub: plotly/plotly.js · 16k+ stars
- Python 绑定: plotly.py
- 关联产品: Dash（仪表盘框架）
- 代表用户: Netflix、Tesla、CERN
import plotly.express as px
fig = px.parallel_coordinates(df, color="species_id")
fig.show()Plotly 的核心优势是生态完整性——从 Jupyter 内嵌到 Dash 生产仪表盘，一条链全覆盖。但处理百万级数据点时性能不如 Bokeh。
4. Bokeh — 大数据量的服务端渲染
- 官网: bokeh.org
- GitHub: bokeh/bokeh · 19k+ stars
- 许可: BSD
- 核心架构: 服务端 Bokeh Server → WebSocket 推送数据增量 → 前端最小更新
Bokeh 能处理百万级数据点的实时可视化，这是 Plotly 做不到的。代价是学习曲线更陡，API 不如 Plotly Express 直观。
5. HiPlot — Facebook 高维数据探索
- 官网: facebookresearch.github.io/hiplot
- GitHub: facebookresearch/hiplot · 3k+ stars
- 核心图表: 平行坐标图（Parallel Coordinates）
- AI 场景: 超参数调优可视化——拖拽某维度范围，其他维度自动高亮
6. Yellowbrick — ML 模型诊断
- 官网: scikit-yb.org
- GitHub: DistrictDataLabs/yellowbrick · 4k+ stars
- 核心能力: Scikit-learn 扩展，学习曲线、ROC/AUC、混淆矩阵、特征重要性
from yellowbrick.classifier import ClassificationReport
visualizer = ClassificationReport(model, support=True)
visualizer.fit(X_train, y_train).score(X_test, y_test).show()7. PyGWalker — Tableau 风格的拖拽探索
- 官网: kanaries.net
- GitHub: Kanaries/pygwalker · 12k+ stars
- 体验: 在 Jupyter 中打开 Tableau 风格界面，拖拽字段自动生成图表
8. Pyvis — 网络关系图
- 官网: pyvis.readthedocs.io
- GitHub: WestHealth/pyvis · 1k+ stars
- 特色: 基于 vis.js，物理引擎驱动的交互式节点布局，输出 HTML
9. D3Blocks — D3 的组件化封装
- 官网: d3blocks.github.io
- GitHub: d3blocks/d3blocks
- 典型图表: Sankey、Chord、Treemap、Heatmap
- 价值: 解决了"D3 太底层"的痛点
10. Observable — 数据叙事的交互笔记本
- 官网: observablehq.com
- GitHub: observablehq
- 核心范式: 响应式单元格 — 任何值变化，依赖链自动重新计算
- 关联: Notebook-Kit（嵌入式笔记本）
11. Flourish — 无代码数据讲故事
- 官网: flourish.studio
- 归属: 2022 年被 Canva 收购
- 代表用户: BBC、Google、Deloitte
- 定位: 不是分析工具，是传播工具
12. 场景决策矩阵
| AI 场景 | 首选 | 备选 |
|---|---|---|
| EDA 探索分析 | PyGWalker | Plotly Express |
| 高维 Embedding 可视化 | HiPlot | Plotly 平行坐标 |
| 模型训练监控 | Plotly Dash | Bokeh Server |
| 模型诊断 | Yellowbrick | SHAP + Plotly |
| 知识图谱 | G6 | Pyvis |
| AI Pipeline 流程 | X6 | React Flow |
| 地理分布 | L7 | ECharts + Mapbox |
| 注意力权重 | D3Blocks Sankey | ECharts Sankey |
| AI 推荐图表 | AVA | 手写规则 |
| 数据叙事传播 | Flourish | Observable |
| 论文级图表 | Plotly | Bokeh |
下一篇：AVW-4 交互叙事引擎——Twine、Ren'Py、Ink、Inform、Shorthand 与 Idyll
实操清单
- 访问 ECharts 官网 并打开示例库，找到雷达图和力引导图示例，在浏览器中运行并修改数据
- 用
npm install echarts或 CDN 引入 ECharts，用文中代码片段渲染一个雷达图，替换成自己的三个维度数据 - 访问 AntV AVA 官网，将一份真实数据集传入
Advisor.advise()，观察 AI 推荐的图表类型及置信度分数 - 用 G2 的
encode('color', 'cluster')写法，将一组聚类结果（含 pca_dim1/pca_dim2/cluster 字段）渲染为散点图 - 在 Jupyter Notebook 中
pip install hiplot，把一次超参数搜索结果（learning_rate、batch_size、accuracy 等字段）传入 HiPlot，拖拽平行坐标轴筛选高分区间 -
pip install yellowbrick，用ClassificationReport可视化一个 Scikit-learn 分类模型的精确率/召回率/F1 -
pip install pygwalker，在 Jupyter 中调用pyg.walk(df)，通过拖拽字段生成至少三种不同图表类型 - 用 Pyvis 将一组（节点, 边）数据渲染为交互式知识图谱，输出 HTML 文件并在浏览器中打开
- 访问 Observable，Fork 一个公开 Notebook，修改数据源，观察响应式单元格自动重新计算的联动效果
- 对照文章末尾的场景决策矩阵，针对自己当前 AI 项目的三个可视化需求，从矩阵中选出首选工具，并写下选择理由