数据可视化库选型：从 Chart.js 到 D3.js

July 8, 2026 AI工具 D3.js, ECharts, Chart.js, Highcharts, AntV, Plotly.js, Recharts, 数据可视化前端技术系列 4687 字 10 分钟阅读

市面上图表库那么多，Chart.js、ECharts、D3、Highcharts、AntV、Plotly、Recharts、Victory… 选型时第一个要搞清楚的是：它们根本不是互相替代的关系。

配置驱动工厂 vs 零件工具箱，这是本质区别。D3.js 是底层工具箱，你要自己拼装零件；ECharts 和 Highcharts 是配置化工厂，声明式配置就能出图；Recharts 和 Victory 是 React 原生组件库，声明式更自然。搞清楚这个定位差异，选型就对了大半。

D3.js：数据驱动的底层工具

先说 D3.js——很多人以为它是图表库，其实它根本不是。

D3.js（Data-Driven Documents）由 Mike Bostock、Jeffrey Heer、Vadim Ogievetsky 共同创建，2011 年正式发布。Mike Bostock 当时是斯坦福大学博士，后来成为纽约时报图形编辑，D3 的很多理念源于其在新闻数据可视化领域的实践。D3 不是传统意义上的"图表库"，而是一个底层工具集、领域特定语言（DSL），直接操作基于数据的文档，拥抱并构建于标准 Web 图形表示（SVG、HTML、CSS）之上，而非重新发明。

核心机制是数据连接、选择器和过渡动画。

javascript
1
2
3
4
5
6
// D3 数据绑定核心示例
svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("height", d => d * 5);

这三行代码做了什么？先把数据集绑定到所有矩形元素上，然后用 enter() 进入新数据，最后创建新矩形并设置高度。这就是 D3 的哲学：你告诉它数据是什么，它帮你计算 DOM 应该是什么。

为什么纽约时报用 D3？因为他们要创造独一无二的视觉效果。可视化竞赛里那些让人惊叹的数据新闻作品，背后都是 D3。但代价是学习曲线极陡峭，做一张简单柱状图比 Chart.js 多花 10 倍时间。D3 的定位不是"快速出图"，而是"定制化到极致"。

优点是灵活度天花板，可实现任何视觉效果；模块化按需引入，全量包 90KB 但实际项目按需引入子模块可压缩至 20-40KB；生态庞大。缺点是学习曲线极陡峭；开发成本高；是"图表零件"而非"图表库"，无开箱即用图表。定位上与 ECharts/Highcharts 等配置驱动库完全不同，D3 是数据驱动底层工具。

与 React/Vue 的结合方式，D3 官方文档明确指出需区分两类模块。纯声明式方案——D3 中不操作 DOM 的模块（如 d3-scale、d3-array、d3-interpolate）可直接在 React JSX 中使用。

jsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import * as d3 from "d3";
export default function LinePlot({ data }) {
  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);
  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);
  return (
    <svg width={width} height={height}>
      <path fill="none" stroke="currentColor" d={line(data)} />
    </svg>
  );
}

对于操作 DOM 的模块（d3-selection、d3-transition、d3-axis），通过 React 的 ref 和 useEffect 避免虚拟 DOM 冲突。D3 完全控制 DOM，React 仅提供容器的方案则适合复杂交互（拖拽、缩放）场景。

ECharts：配置驱动图表工厂

ECharts 完全是另一个物种。

ECharts（Enterprise Charts）由百度 EFE 团队于 2013 年创建并开源。关键节点：2018 年 1 月进入 Apache 孵化器；2021 年 1 月 26 日正式毕业成为 Apache 软件基金会顶级项目（TLP）；2020 年底发布重量级 Apache ECharts 5 版本；当前最新 v6.1.0。

配置驱动，JSON 一扔，图表就出来了。

javascript
1
2
3
4
5
6
const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  xAxis: { type: 'category', data: ['Mon','Tue','Wed'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150], type: 'bar' }]
});

图表类型在免费库中最全：支持折线/柱状/饼图/散点/雷达/箱线图/热力图/关系图/树图/桑基图/漏斗图/仪表盘/K线图/地图/3D 等 50+ 种类型。

渲染引擎基于 ZRender（轻量级 Canvas 库），支持 Canvas 和 SVG 双渲染模式。Canvas 渲染器高性能，适合大数据集，是默认模式。SVG 渲染器提供更好的可缩放性和打印质量。采用渐进式渲染和数据采样策略，可处理百万级数据点。

适用场景是企业级仪表盘、数据可视化大屏（国内首选）、BI 系统。优点是图表类型最全；动画与视觉效果一流；国内文档生态强；Apache-2.0 免费商用；大屏可视化首选。缺点是全量体积偏重（360KB gzip）；配置项极庞大，复杂图表可维护性是隐患；a11y 需大量自定义。

定位上与 D3 完全不同。ECharts 是配置化图表工厂（声明式配置出图），D3 是数据驱动底层工具（从零构建）。ECharts 开箱即用，D3 灵活但需手动实现。

Highcharts：商业图表库标杆

Highcharts 则是商业图表库的标杆。

Highcharts 由挪威 Highsoft 公司于 2009 年发布，是全球最早成熟的 JavaScript 图表库之一，采用 TypeScript 开发，基于 SVG 和部分 Canvas/WebGL 技术，已稳定迭代 16 年。

商业授权模式：非商业用途免费（个人学习/开源/教育/学术）；商业项目需付费授权。

全家桶产品线包括 Core、Stock（金融 K线）、Maps（地图）、Gantt（甘特图）、Dashboards（仪表盘）、Grid（透视表格）。

最核心的优势是 a11y 无障碍模块，业界标杆。内置屏幕阅读器支持、键盘导航、色盲模式、ARIA 描述，WCAG 2.2 合规，开箱即用。这对需要合规的企业级系统来说，是巨大的省心点。

Export Server 是独到优势，服务端导出 PNG/SVG/PDF，对于需要生成报表下载的场景很实用。

javascript
1
2
3
4
5
import Highcharts from "highcharts";
Highcharts.chart('container', {
  title: { text: '季度营收' },
  series: [{ data: [1, 3, 2, 4] }]
});

典型应用是企业报表、金融/量化平台（K线）、政企医疗合规系统、需要服务端导出的报表系统。优点是图表类型最全（含金融专业图表）；a11y 合规开箱即用；官方 React 封装与核心同步；Export Server 服务端导出；16 年稳定维护。缺点是商业收费（预算敏感项目不适用）；体积 99KB gzip（中等）。

Chart.js：轻量简单

Chart.js 的定位很明确：轻量简单。

Chart.js 由 Nick Downie 于 2013 年 3 月 17 日发布（v0.1），采用 MIT 开源许可，定位为基于 Canvas 的JavaScript 图表库，作为 SVG 图表库的替代方案。GitHub 约 6 万 stars。

68KB gzip，体积最小，5 分钟上手。Canvas 渲染，8 种基础图表类型折线柱状饼图散点雷达极坐标圆环混合图就够了。

javascript
1
2
3
4
5
const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',
  data: { labels: ['Q1','Q2'], datasets: [{ data: [400, 300] }] }
});

v4 引入 Tree-shaking（按需注册组件可减少数十 KB）、内置 Colors 插件（品牌色零配置）、改进无障碍访问支持。

应用场景是简单图表、快速原型、轻量管理系统、首屏极致敏感场景。优点是最轻量；5 分钟上手；MIT 完全免费；社区活跃。缺点是图表类型有限（基础 8 种）；无金融 K线/地图/甘特/3D；交互能力较弱；a11y 支持有限。

适用场景是"我偶尔要用图表"。如果你的需求是管理系统里偶尔展示几个柱状图，不需要复杂交互，首屏性能敏感，Chart.js 是最佳选择。

Plotly.js：科学计算专长

Plotly.js 来自 Python 生态的 Plotly.py，是 Plotly 图表生态的 JavaScript 实现。通过将图表抽象为声明式 JSON 结构，被用作 Python、R、MATLAB 的浏览器端图表库。当前 v3.6.0，gzip 363KB（最重之一）。

科学计算和统计分析是专长，3D 支持很强。渲染方式是 SVG + WebGL（3D 图表全部用 WebGL 渲染，利用 GPU 加速）。提供 WebGL 轨迹类型（Scattergl、Heatmapgl）处理数万级以上数据点。

双接口设计：Plotly Express（px）高级接口（快速创建）+ Graph Objects（go）低级接口（精细化控制）。

javascript
1
2
3
4
Plotly.newPlot('myDiv', [{
  x: [1, 2, 3], y: [4, 5, 6],
  type: 'scatter', mode: 'lines+markers'
}]);

典型应用是科学计算可视化、统计分析、3D 可视化、Jupyter Notebook 集成。优点是统计与科学图表专长；3D 支持强；跨语言（Python/R/MATLAB/JS）；MIT 免费。缺点是体积最大（363KB）；常规业务图表用 ECharts/Highcharts 更顺手；首屏性能要求高时不适合。

AntV：图形语法体系

AntV 系列是蚂蚁集团推出的企业级数据可视化解决方案，不是单一图表库，而是完整生态体系。核心理念为"图形语法（Grammar of Graphics）"，强调声明式、可组合的数据映射。

G2 专注统计可视化场景，取名自 Leland Wilkinson 的《The Grammar of Graphics》，是一套完备的可视化语法。将图表抽象为可组合的原子单元——数据、坐标系、几何标记、视觉通道、标度、坐标轴、图例。当前 v5.4.8，MIT 免费，gzip 321KB。衍生 G2Plot 提供高层封装。

G6 专注关系网络图/图分析可视化。应用场景：知识图谱、社交网络分析、拓扑关系图、流程关系图。

L7 是地理空间数据可视化，基于 WebGL 渲染。应用场景：地图、热力图、轨迹图、地理大数据可视化。

其他组件包括 X6（流程图/拓扑图编辑引擎）、F2（移动端可视化）。

优点是体系化覆盖全场景；图形语法理念先进，灵活可组合；国内企业生态强。缺点是体积偏大（G2 321KB）；产品类别多，上手成本高；与海外主流框架深度集成弱。

定位上，相比 ECharts 的"配置工厂"，AntV 更强调"图形语法"的理论性和可组合性。

React 原生组件库：Recharts vs Victory

React 项目该选什么？Recharts 和 Victory 都是 React 原生组件库。

Recharts 2015 年首次发布，基于 D3.js 构建，社区维护。核心理念是 React 原生组件，声明式，将 D3 的强大能力封装为 React 组件，无需碰命令式 API。构建于 SVG 元素之上，state 变化自动重渲染。当前 v3.9.1，MIT 免费，gzip 150KB，周下载量最高。

jsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { LineChart, Line, XAxis, YAxis, Tooltip } from "recharts";
function App() {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line dataKey="uv" stroke="#8884d8" />
    </LineChart>
  );
}

Victory 2015 年由 Formidable Labs 推出。核心特点是一套 API 同时支持 Web 和 React Native（跨平台图表，这是核心差异化优势）；强大的动画系统，支持路径过渡效果；可组合的图表组件。当前 v37.3.6，MIT 免费，gzip 112KB。

两者都是 React 原生组件库，但 Recharts 生态最大，React 项目最顺手的选择；Victory 跨平台（Web + React Native）是核心差异点，适合需要共享图表逻辑的团队。

其他重要库

其他重要库还包括 amCharts（20 年以上经验，GPU 加速 Canvas，TypeScript 原生，2 万+全球客户）、FusionCharts（生产就绪，支持复杂业务流程、高数据量）、AnyChart（最早可追溯到 Flash 时代 2003 年，后转型 HTML5/SVG/VML）、TOAST UI Chart（NHN 韩国，基于 Canvas）。

选型决策树

最后是选型决策树。

mermaid
flowchart TD
    A[项目选型] --> B[Chart.js<br/>轻量 68KB]
    A --> C[ECharts<br/>大屏 360KB]
    A --> D[D3.js<br/>定制零件箱]
    A --> E[Recharts<br/>React 原生]
    A --> F[Highcharts<br/>企业合规]

    style A fill:#FF9800,color:#fff
    style B fill:#4CAF50,color:#fff
    style C fill:#2196F3,color:#fff
    style D fill:#9C27B0,color:#fff
    style E fill:#2196F3,color:#fff
    style F fill:#f44336,color:#fff

设计哲学差异

设计哲学上，D3.js 是数据驱动底层工具（图表零件），最大灵活度，最高成本；ECharts/Highcharts 是配置驱动图表工厂，setOption(config) 命令式核心；AntV G2 是图形语法驱动，声明式可组合的数据映射；Recharts/Victory 是 React 组件驱动，声明式最自然；Plotly.js 是声明式 JSON 结构，跨语言抽象。

命令式 vs 声明式的差异也很关键。命令式核心本质是 chart.setOption(config)，React 封装把 config 作为 props 传入，需注意响应式更新。React 原生则图表本身是 React 组件，state 变化自动重渲染，心智一致但深度定制不如命令式灵活。

总结

核心认知是：它们不是互相替代的关系，而是定位完全不同的工具。选型前先问自己三个问题：定制化需求有多高？预算是否充足？团队技术栈是什么？然后按决策树走，基本不会错。博客中嵌入交互式图表，ECharts 是强力选择，注意按需引入控制体积。轻量图表选 Chart.js，React 项目选 Recharts，企业合规系统选 Highcharts，定制化到极致选 D3，就是这么简单。

所属系列: 前端技术系列

← 上一篇 SVG、Canvas、WebGL：三层渲染技术怎么选下一篇 → 图表即代码：Mermaid 与它的朋友们