一句话总结
ECharts 是一套开箱即用的图表库——传个配置对象，图表就出来了，适合快速交付。
D3.js 是一套可视化底层引擎——它给你数据绑定和 DOM 操作工具，具体画什么、怎么交互，全得自己写，上限极高但下限也极低（门槛高）。
类比：ECharts 是「用 PPT 做图表」，D3 是「用 Canvas 从零画」——前者快，后者自由。
核心区别对比
| 核心指标对比 | ||
| 抽象层级 | 高层封装，配置即用 | 底层引擎，自己实现一切 |
| 学习曲线 | 平缓，1–2 天入门 | 陡峭，2–4 周入门 |
| 体积（min） | ~800KB（全量），可按需引入 | ~100KB（核心），按需加模块 |
| 渲染方式 | Canvas + SVG（自动切换） | SVG 为主，Canvas 需自己实现 |
| 交互能力 | 内置丰富（tooltip、zoom、brush） | 完全自由，全部手写 |
| 浏览器兼容 | IE9+、现代浏览器 | IE9+（部分功能需 polyfill） |
| 事件处理 | 内置事件系统 | 自己绑定 DOM 事件 |
ECharts 适用场景
- 业务报表 — 折线图、柱状图、饼图，现成的，直接配数据
- 快速原型 — 产品 Demo 阶段，不想在图表上浪费时间
- 移动端适配 — 内置响应式，自动适配不同屏幕
- 团队协作 — 配置格式统一，新人接手成本低
一个最基础的 ECharts 图表：
echarts 示例
// 初始化 + 配置，两步搞定
const chart = echarts.init(document.getElementById('chart'))
chart.setOption({
xAxis: { type: 'category', data: ['周一','周二','周三'] },
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: [120, 200, 150],
itemStyle: { color: '#00f0ff' }
}]
})D3.js 适用场景
- 高度定制化图表 — 业务特有的可视化形式，现成图表库没有
- 科研级可视化 — 论文插图、复杂网络图、力导向图
- 复杂交互 — 拖拽、刷选、联动，需要完全控制交互细节
- 学习可视化原理 — 想深入理解数据绑定、比例尺、坐标系统
D3 的核心思路是「数据绑定 DOM」：
d3 数据绑定示例
// 数据绑定 + enter/update/exit 三阶段
const data = [120, 200, 150]
const bars = d3.select('svg')
.selectAll('rect')
.data(data)
bars.enter()
.append('rect')
.attr('x', (d, i) => i * 40)
.attr('height', d => d)
.attr('fill', '#00f0ff')D3 的
enter/update/exit 是核心概念，理解了这个才算真正入门 D3。我的选型建议
| 场景 | 推荐 |
|---|---|
| 业务后台 / 管理端报表 | ✅ ECharts |
| 产品 Demo / 快速验证 | ✅ ECharts |
| 对外展示 / 官网数据大屏 | ✅ ECharts（或 ECharts + 定制主题） |
| 科研论文插图 | ✅ D3.js |
| 高度定制化交互图表 | ✅ D3.js |
| 想深入理解可视化原理 | ✅ D3.js |
| 团队技术栈以 Vue/React 为主 | ✅ ECharts（有官方 wrapper） |
学习资源推荐
- ECharts 官方文档 — 5.x 文档非常完善，示例可以直接改着用
- D3 Gallery — https://observablehq.com/@d3/gallery — 官方示例库，照着抄是最好的学习方式
- 《数据可视化实战》 — 结合 ECharts 和 D3，讲原理也讲实战
如果你是产品经理，建议先学 ECharts 到能读懂配置的程度，有时间再深入了解 D3 的数据绑定思想。