Apache ECharts 是一款基于 JavaScript / TypeScript 的开源可视化图表库，2013 年由百度团队原创，2018 年捐赠给 Apache 软件基金会，2021 年晋升为 Apache 顶级项目 。13 年间，凭借 Canvas / SVG 双引擎一键切换、 千万级数据实时渲染、20+ 内置图表 + 任意组合，成为国内做技术绕不开的可视化基础设施——也是 HN 上罕见的 ” 中国开源但全球热门 ” 项目。
写在前面
数据可视化这事儿，国内国外走了两条完全不同的路。
国外：D3.js（数据驱动文档，低层 API，需要手写大量 SVG）→ Plotly.js（科学计算向）→ Observable Plot（声明式）→ Recharts / Victory（React 生态封装）
国内：百度 ECharts（2013）→ 蚂蚁 AntV / G2 / G6（2017）→ 字节 Bytedance Charts（2021）
ECharts 是国内生态的 事实标准 ——不是因为它最早，而是因为它 最完整。从最简单的柱状图到复杂的 3D / 地理可视化 / 关系图 / 桑基图，从 5 个数据点到 1000 万数据点实时渲染，从 PC 端到移动端响应式，从 Canvas 到 SVG 切换——ECharts 几乎覆盖了所有可视化场景。
飞熊做技术咨询，国内客户首屏 90% 用 ECharts——不是 D3，不是 Plotly，不是 Chart.js。本文带你深入 ECharts 的能力全景、技术架构、生态系统，以及它跟 Plotly / Dash / AntV / D3 的对比选型。
一、它解决什么问题
一句话 ：ECharts 让你在 Web 端 零依赖 地画 20+ 种图表，并且支持 Canvas / SVG 双引擎 + 千万级数据实时渲染 + 完整无障碍。
| 场景 | 例子 | ECharts 表现 |
|---|---|---|
| 后台 Dashboard | 折线图 / 柱状图 / 饼图 / 雷达图 | 20+ 图表直接用，配置项丰富 |
| 地理可视化 | 中国省份地图 / 世界地图 / 热力图 | 内置 GeoJSON + 百度地图扩展 |
| 大数据可视化 | 1000 万点散点图 / 实时时序 | Canvas 渐进渲染 + 流加载 |
| 关系图谱 | 知识图谱 / 流程图 / 拓扑图 | Graph / Sankey / Tree / Treemap 全套 |
| 3D 可视化 | 3D 柱状图 / 3D 地图 / WebGL 加速 | ECharts GL 扩展（基于 WebGL） |
| 金融图表 | K 线图 / 烛台图 / 深度图 | 内置 candlestick + 200K 数据缩放 |
| 移动端 | H5 图表 / 响应式 | 默认支持触摸事件 + 响应式设计 |
| 无障碍 | 屏幕阅读器 / 色盲模式 | 自动生成 aria 描述 + decal 图案 |
基本信息：
| 维度 | 数据 |
|---|---|
| GitHub | apache/echarts |
| Stars | 67,081（池子里 stars 最高，比 Plotly 18K 高 3.7 倍） |
| Forks | 19,807（极高，说明生态扩散广泛） |
| Open Issues | 1,558（健康） |
| License | Apache-2.0（无任何商用风险） |
| 首次 commit | 2013-04-03（13 年老项目） |
| 最近 commit | 2026-08-16（今天还在活跃） |
| 最近 push | 2026-08-04（10 天前推过代码） |
| 仓库大小 | 264 MB |
| 主语言 | TypeScript（v6 重构后从 JS 转向 TS） |
| 最新版本 | v6.1.0（2026-05-18） |
| 项目状态 | Apache 顶级项目（2021 年毕业） |
| 学术引用 | Visual Informatics 2018（EI 期刊） |
二、核心能力全景：6 大特性 + 20+ 内置图表
ECharts 官方把核心能力归纳为 6 大特性：
1. Flexible Chart Types — 20+ 图表任意组合
| 类别 | 图表 |
|---|---|
| 基础图表 | 折线图 / 柱状图 / 饼图 / 散点图 / 雷达图 / K 线图 / 箱线图 / 热力图 |
| 高级图表 | 桑基图 / 旭日图 / 漏斗图 / 仪表盘 / 平行坐标 / 树图 / 矩形树图 |
| 关系图 | 关系图（Graph）/ 力导向图 / 流程图 |
| 地理 | 地图 / 百度地图 / 热力图 / 飞行线 |
| 3D | 3D 柱状图 / 3D 散点图 / 3D 地图 / 3D 曲面（ECharts GL 扩展） |
| 文本 | 字符云（WordCloud）/ 文本标签云 |
| 混合 | 多图表叠加 + dataset 联动 |
每个图表都支持 任意组件组合——标题、图例、工具箱、缩放、视觉映射、提示框、数据集……所有元素都可配置。
2. Powerful Rendering Engine — Canvas + SVG 双引擎
| 引擎 | 适用场景 | 优势 |
|---|---|---|
| Canvas | 大数据量（>10K 点）/ 高频更新 / 移动端 | 性能强，单个 canvas 渲染 |
| SVG | 小数据 / 矢量要求 / 可访问性 / SEO | DOM 可点击、样式可控、可被爬虫抓取 |
双引擎一键切换——一行代码切换渲染方式：
const chart = echarts.init(domElement, null, { renderer: 'canvas'}); // 或 'svg'
千万级数据实时渲染 ——核心是 渐进渲染（progressive rendering） + 流式加载（stream loading）：
const chart = echarts.init(domElement);
chart.setOption({dataset: { source: largeDataArray}, // 1000 万点
series: [{
type: 'scatter',
progressive: 4000, // 渐进渲染阈值
progressiveThreshold: 8000 // 流式阈值
}]
});
官方 demo：1000 万数据点 实时拖拽缩放依然流畅（Canvas + 渐进渲染 + WebGL 加速）
3. Professional Data Analysis — 数据集 + 多维分析
chart.setOption({
dataset: [{
source: rawData,
transform: [{
type: 'filter', // 数据过滤
config: {dimension: 'year', gte: 2020}
}, {
type: 'boxplot', // 数据聚合
config: {itemName: 'score', value: 'value'}
}, {
type: 'cluster', // 聚类
config: {dimension: 'score'}
}]
}],
series: [{type: 'boxplot'}]
});
支持 数据过滤 / 聚类 / 回归 —— 同一份数据多维度分析，不用前端再写 SQL 聚合。
4. Elegant Visual Design — 默认设计 + 主题生态
- 默认配色 遵循可视化原则（ColorBrewer 调色板）
- 响应式设计（resize 自动重绘）
- 主题生态：
- 官方主题下载（theme builder）
- 第三方主题社区（echarts-themes-pkg）
- 暗色主题、复古主题、节日主题……
5. Healthy Community — 13 年生态
- 19,807 forks（仅次于 D3.js / Three.js）
- 官方社区：Examples Gallery + 几百个示例代码
- 第三方扩展：ECharts GL（3D）/ Liquidfill（水球图）/ WordCloud（字符云）/ 百度地图扩展 / ArcGIS 地图扩展
- 教程生态：中文社区最活跃（bookstack / CSDN / 知乎）
6. Accessibility-Friendly — 无障碍
- 自动生成 aria 描述（图表语义结构）
- decal 图案（色盲模式用纹理代替颜色）
- 符合 WCAG 2.0 标准
- 论文引用：Visual Informatics 2018（EI 期刊，可正式学术引用）
三、差异化能力：v6 TypeScript 重构 + 自研 ZRender + V6 升级
1. v6 TypeScript 全面重构（2025 重磅升级）
ECharts 从 v5 开始就支持 TypeScript，v6（2025） 完成全面 TS 重构：
- 类型安全：所有 option 配置项有完整 TS 类型提示
- IDE 友好：VSCode 自动补全、类型检查
- 生态统一：跟 React/Vue/Angular 框架集成更顺滑
- 长期维护：TS 让核心代码库维护性大幅提升
2. 自研 ZRender 渲染引擎
ECharts 的渲染底层是 自研的 ZRender（轻量级 Canvas 库）：
- 矢量图元（Circle / Rect / Polygon / Sector / BezierCurve……）
- 事件系统（鼠标 / 触摸 / 拖拽 / 缩放）
- 动画系统（缓动函数 + 时间轴）
- 文本排版（自动换行 + 多语言）
- 可独立使用——很多项目用 ZRender 做画布（甚至不画图）
3. V6 Upgrade Guide 关键变化
v6 升级指南 包含：
- TS 重构：option 配置类型化
- 新图表：matrix 矩阵图（headless matrix 模式）
- 新配置项：
containShape/clip/clockwise/cursorGrab - 数据可视映射增强：
visualMap.seriesTargets支持多 series 维度映射 - i18n：新增拉脱维亚语（LV）等多语言
4. 论文级学术认可
ECharts 是少数有 EI 期刊论文 背身的可视化库：
ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
Visual Informatics, 2018
sciencedirect.com/science/article/pii/S2468502X18300068
技术选型时可以用论文背书——这是 D3.js / Plotly / Chart.js 都没有的学术深度。
四、生态系统：百度出身 → Apache 顶级 → 中国开源全球化样本
1. 出身时间线
2013 - 百度 ECharts 团队开源
↓
2018 - 捐赠 Apache 软件基金会（ASF 孵化器）↓
2021 - 毕业晋升为 Apache 顶级项目
↓
2025 - v6 TypeScript 全面重构
↓
2026 - v6.1.0（2026-05-18，最新稳定版）2. 横向扩展生态
| 扩展 | 能力 |
|---|---|
| ECharts GL | WebGL 加速、3D 图表、3D 地图、大数据散点图 |
| Liquidfill 水球图 | 单百分比数据可视化 |
| WordCloud 字符云 | 文本权重可视化 |
| 百度地图扩展 | 在百度地图上叠加 ECharts 图表 |
| ArcGIS 地图扩展 | 在 ArcGIS 地图上叠加 ECharts 图表 |
| ECharts Studio | 在线图表编辑器 |
3. 框架集成
| 框架 | 包 |
|---|---|
| Vue | vue-echarts（官方推荐） |
| React | echarts-for-react |
| Angular | ngx-echarts |
| 原生 | <script src="echarts.min.js"> |
4. 用户案例
ECharts 没有官方用户列表，但 国内互联网公司几乎全部在用：
- 百度（自家产品）
- 阿里（AntV 是 G2 路线，但 ECharts 仍是主力）
- 腾讯（QQ、微信、文档）
- 字节跳动（飞书、抖音数据看板）
- 美团 / 滴滴 / 小米 / 京东……
- GitHub 上 ECharts 被 100,000+ 项目引用
Hacker News 评论：”It’s the best visualization library, but doesn’t get the recognition it deserves — because it’s from China.”
（它是最好的可视化库，但知名度跟实力不匹配——因为它来自中国）
五、对比 Plotly / Dash / AntV / D3.js / Chart.js
| 维度 | Apache ECharts | Plotly.js | Dash | AntV (G2/G6/L7) | D3.js | Chart.js |
|---|---|---|---|---|---|---|
| Stars | 67,081 | ~18K | ~21K | ~20K | ~110K | ~65K |
| 协议 | Apache-2.0 ✅ | MIT ✅ | Apache-2.0 ✅ | MIT ✅ | ISC ✅ | MIT ✅ |
| 出身 | 百度 → Apache | Plotly Inc. | Plotly Inc. | 蚂蚁金服 | Observable | 社区 |
| 主语言 | TypeScript | JavaScript | Python | TypeScript | JavaScript | JavaScript |
| 渲染 | Canvas + SVG | Canvas + SVG | React (Plotly.js) | Canvas + SVG | SVG（手动） | Canvas |
| 图表数 | 20+ 内置 | ~30 | 复用 Plotly.js | G2 20+ / G6 关系图 / L7 地图 | 无（底层） | 8 |
| 大数据 | ✅ 千万级 | ✅ 50 万 | ✅ Plotly.js | ✅ L7 大数据 | ⚠️ 手动优化 | ❌ 万级 |
| 关系图 | ✅ 内置 | ⚠️ plotly-orca | ⚠️ 弱 | ✅ G6 强 | ⚠️ 手动 | ❌ |
| 地图 | ✅ 内置 | ✅ mapbox | ✅ | ✅ L7 强 | ⚠️ 手动 | ❌ |
| 3D | ✅ ECharts GL | ✅ plotly-3d | ✅ | ✅ | ⚠️ 配合 Three.js | ❌ |
| 学习曲线 | ⚠️ 中（配置项多） | ✅ 低 | ✅ 低（Python） | ⚠️ 中 | ❌ 高（底层） | ✅ 低 |
| 配置项丰富度 | ✅ 几百项 | ✅ 多 | ✅ 透传 Plotly | ✅ 多 | ✅ 全开放 | ⚠️ 少 |
| 移动端 | ✅ 触摸 + 响应式 | ✅ | ✅ | ✅ | ⚠️ 手动 | ✅ |
| 无障碍 | ✅ aria + decal | ⚠️ 部分 | ⚠️ 弱 | ✅ | ⚠️ 手动 | ⚠️ 弱 |
| 学术引用 | ✅ Visual Informatics 2018 | ⚠️ 商业为主 | ❌ | ❌ | ✅ 大量论文 | ❌ |
| 中文文档 | ✅ 最完整 | ⚠️ 翻译 | ⚠️ | ✅ 完整 | ⚠️ 翻译 | ⚠️ |
| 商业支持 | Apache（基金会） | Plotly Inc. | Plotly Inc. | 蚂蚁 | 社区 | 社区 |
结论怎么选：
| 你的场景 | 选谁 |
|---|---|
| 国内项目 / 中文文档 / Dashboard / 地理可视化 | Apache ECharts ✅ |
| 科学计算 / Jupyter / 学术 | Plotly.js / Dash |
| Python 数据应用 + 不写 JS | Dash |
| 国内 + 蚂蚁生态 / 关系图谱（最强 G6） | AntV |
| 底层自定义 / 数据驱动文档 / 极致灵活 | D3.js |
| 极简 / 快速原型 / 移动端 H5 | Chart.js |
| ECharts 已经是国内默认 ——技术选型不用纠结， 直接用 ECharts |
对比已调研的飞熊 8 月 BI 栈：
| 已调研项目 | 跟 ECharts 的关系 |
|---|---|
| Plotly (298) | 互补——Plotly 主打 Python / 科学计算，ECharts 主打 Web / Dashboard |
| Dash (299) | 上下游——Dash 是 Python Web 框架，内部用 Plotly.js 渲染，跟 ECharts 是不同栈 |
| next-ai-draw-io (297) | 互补——draw.io 是流程图 / 思维导图工具，ECharts 是数据可视化 |
| Apache Superset (270) / Metabase (274) | 可视化底层——Superset / Metabase 内部很多图表用 ECharts 渲染（特别是 Superset 中国版） |
| ClickHouse (322) | 上下游——ClickHouse 出查询结果，ECharts 渲染图表 |
| Grafana (312) | 不同栈——Grafana 是时序监控可视化，ECharts 是通用数据可视化 |
六、实战：3 步跑通 ECharts
Step 1：安装
# npm
npm install echarts --save
# yarn
yarn add echarts
# pnpm
pnpm add echarts
# CDN（直接用）<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
# 按需引入（只打包用到的图表）import * as echarts from 'echarts/core'
import {LineChart, BarChart} from 'echarts/charts'
import {GridComponent, TooltipComponent, LegendComponent} from 'echarts/components'
import {CanvasRenderer} from 'echarts/renderers'
echarts.use([LineChart, BarChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])
Step 2：基础柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts Demo</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px;"></div>
<script>
const chart = echarts.init(document.getElementById('main'));
chart.setOption({title: { text: '月销售额'},
tooltip: {trigger: 'axis'},
legend: {data: ['销售额'] },
xAxis: {
type: 'category',
data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月']
},
yAxis: {type: 'value'},
series: [{
name: '销售额',
type: 'bar',
data: [12000, 19000, 15000, 22000, 28000, 31000],
itemStyle: {color: '#5470c6'}
}]
});
</script>
</body>
</html>
Step 3：进阶场景（千万级数据 + 异步加载）
// 1. 千万级数据渐进渲染
const chart = echarts.init(document.getElementById('main'), null, {renderer: 'canvas'});
const rawData = [];
for (let i = 0; i < 10000000; i++) {rawData.push([Math.random() * 100, Math.random() * 100, Math.sqrt(i)]);
}
chart.setOption({tooltip: { trigger: 'item'},
series: [{
type: 'scatter',
symbolSize: 2,
data: rawData,
progressive: 4000, // 渐进渲染阈值
progressiveThreshold: 8000 // 流式加载阈值
}]
});
// 2. 异步加载大数据
$.get('https://api.example.com/large-data').done(data => {
chart.setOption({dataset: { source: data},
series: [{type: 'scatter'}]
});
});
// 3. 切换渲染引擎（Canvas → SVG）chart.dispose();
const svgChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
svgChart.setOption(option);
// 4. 响应式 resize
window.addEventListener('resize', () => chart.resize());
七、风险与坑
1. 配置项学习曲线陡峭
ECharts 的 option 配置项 几百个，新手上手需要查文档。对比 Chart.js 的 8 个图表 / 简单配置，ECharts 的复杂度高。
缓解：先用 Examples Gallery 复制示例改数据，逐步深入。
2. 包体积大（完整版 ~1MB）
完整 echarts.min.js 约 1MB gzip 后 300KB+——对性能敏感的移动端 H5 不友好。
缓解 ：用 按需引入（只 import 用到的图表和组件），通常可降到 100-200KB。
3. 大数据场景需要手动优化
虽然支持千万级，但默认配置可能卡顿。需要调 progressive / progressiveThreshold / sampling / large 等参数。
4. 中文文档版本有时延后
英文 changelog 比中文翻译快 1-2 周。
缓解：英文为主、中文为辅。
5. 旧版本 v3/v4 兼容性
网上很多教程还在用 v3 / v4 语法，v5/v6 有 breaking changes。
缓解：直接看 v6 官方文档 + 升级指南。
6. React / Vue 集成需要第三方包
官方没有原生 React/Vue 组件，需要 echarts-for-react / vue-echarts。
7. 19,807 forks = 生态扩散的双刃剑
生态丰富意味着 第三方教程质量参差不齐——百度搜出来的中文教程 30% 已经过时。
八、总结
Apache ECharts 不是 ” 百度的一个产品 ”——它是 中国开源全球化的样本：从百度内部工具到 Apache 顶级项目，从国内默认到 HN 热门第二。
3 个最值得用的理由：
- 国内生态事实标准 ：67K stars / 19,807 forks / 13 年积累 / 百度 → Apache 顶级项目—— 国内做技术选型不用纠结，直接用
- 完整可视化能力 ：20+ 图表 + Canvas/SVG 双引擎 + 千万级数据 + 关系图 + 3D + 地图—— 一个库覆盖所有可视化场景
- 学术 + 工程双背书 ：Visual Informatics 2018 论文 + Apache 顶级项目 + TS 重构 + 活跃社区—— 技术深度足够支撑技术咨询门面
1 句建议：
直接打开 ECharts Examples Gallery 选一个最像你需求的 demo，复制代码改数据——比看 3 篇教程上手快。
如果你的场景是 Python 数据应用 / Jupyter 集成 ，看 Plotly (298) / Dash (299)；如果你的场景是 关系图谱 / 蚂蚁生态 ，看 AntV (G2/G6/L7)；如果你的场景是 底层自定义 / 数据驱动文档，看 D3.js。
但 在国内做 Web 端数据可视化，ECharts 是默认答案。
参考
- Apache ECharts GitHub · 67K stars / Apache-2.0 / TypeScript
- Apache ECharts 官方文档 · 中英双语
- Examples Gallery · 几百个示例
- Apache ECharts 6.1 Release Notes · 2026-05-18 最新版
- V6 Upgrade Guide · v5 → v6 升级
- ECharts Visual Informatics 2018 论文 · EI 期刊引用
- ECharts Hacker News 讨论 · 2025 HN 热门第二
- AntV 官方 · 国内 G2/G6/L7 生态对比
- Plotly.js GitHub · 国外科学计算可视化
- D3.js GitHub · 数据驱动文档底层
- Chart.js GitHub · 极简单图表对比