Apache ECharts 6.7 万 Star，数据可视化首选-开发者社区

一、项目背景及简介

做数据可视化时，你还在用 Chart.js 反复调样式？或者用 D3.js 从头画图？前者功能太弱，后者学习成本太高。有没有一个库，既开箱即用又高度可定制，还能在百万级数据量下流畅运行？

Apache ECharts就是答案。它是百度开源、后捐献给 Apache 基金会的纯 JavaScript 数据可视化库，基于轻量级 Canvas 库 ZRender 构建。一句配置就能生成专业级图表，从折线图到 3D 地球，无所不能。

截至 2026 年 8 月，ECharts 在 GitHub 上拥有66,951 颗 Star，npm 周下载量超 200 万，是 GitHub 上最受欢迎的图表库之一。全球超过 43 万企业在使用它，包括阿里、腾讯、华为等头部科技公司。

💡 核心价值：声明式配置 + 高性能渲染，让数据可视化变得简单而强大。

二、技术栈解析

ECharts 的技术架构采用了分层设计，兼顾了易用性和扩展性：

底层渲染层：

ZRender— 自研轻量级 Canvas 渲染引擎，支持 SVG 和 Canvas 两种渲染模式
自动降级：现代浏览器用 Canvas，老旧浏览器自动切到 SVG

中间层：

数据驱动— 所有图表基于统一的数据模型（Dataset），支持二维表、树形、图等多种格式
响应式布局— 容器尺寸变化时自动重绘，完美适配移动端、

顶层 API：

声明式配置— 一个 JSON 对象搞定所有图表配置，上手成本极低
链式调用— 支持面向对象操作方式，适合复杂场景

🎯 技术亮点：独创的「增量渲染」算法，百万级数据点下仍保持 60fps 流畅渲染。

三、核心功能

1. 20+ 图表类型

基础型：折线图、柱状图、饼图、散点图
进阶型：热力图、雷达图、桑基图、树图
地理型：地图、3D 地球、迁徙图
统计型：箱线图、K 线图、关系图

2. 交互能力

缩放、拖拽、数据区域选择
图例开关、数据下钻、Tooltip
视觉映射（颜色、大小、透明度）

3. 数据高性能

百万级数据点流畅渲染
大数据量采样算法自动降级
异步加载、增量更新

4. 跨平台

浏览器、Node.js 后端渲染
微信小程序、支付宝小程序
React/Vue 封装（echarts-for-react、vue-echarts）

四、项目优势

✅ 优势清单：

学习成本极低— 5 分钟上手，配置即图表
图表类型最全— 20+ 类型覆盖几乎所有业务场景
性能强悍— 增量渲染 + 采样算法，轻松处理百万级数据
国际化支持— 10+ 语言，中英文文档都极其完善
Apache 许可证— 商业友好，无版权风险

⚠️ 选型建议：

推荐场景：BI 报表、大屏展示、实时监控看板、数据中台可视化
不推荐场景：需要高度定制 DOM 交互的场景（选 D3.js）
竞品对比：比 Highcharts 免费，比 D3.js 易用，比 Chart.js 功能全面

五、安装使用

# 通过 npm 安装 npm install echarts --save # 通过 CDN 引入 # <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

快速创建第一个图表：

// 1. 准备容器 <div id="main" style="width: 600px; height: 400px;"></div> // 2. 初始化图表 const chart = echarts.init(document.getElementById('main')); // 3. 配置参数 const option = { title: { text: '用户增长趋势' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: { type: 'value' }, series: [{ name: '用户数', type: 'line', data: [820, 932, 901, 1234, 1290, 1530], smooth: true }] }; // 4. 渲染图表 chart.setOption(option);

六、代码示例

下面是一个完整的仪表盘示例，展示 ECharts 的多图表组合能力：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 仪表盘</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <style> .chart-container { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; } .chart-box { width: 400px; height: 350px; border: 1px solid #eee; border-radius: 8px; } </style> </head> <body> <div class="chart-container"> <div id="chart1" class="chart-box"></div> <div id="chart2" class="chart-box"></div> <div id="chart3" class="chart-box"></div> <div id="chart4" class="chart-box"></div> </div> <script> // 初始化所有图表 const charts = ['chart1','chart2','chart3','chart4'] .map(id => echarts.init(document.getElementById(id))); // 饼图 — 各产品销售额占比 charts[0].setOption({ title: { text: '销售额占比', left: 'center' }, tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: '50%', data: [ { value: 1048, name: '产品A' }, { value: 735, name: '产品B' }, { value: 580, name: '产品C' }, { value: 484, name: '产品D' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } } }] }); // 柱状图 — 月度销售对比 charts[1].setOption({ title: { text: '月度销售', left: 'center' }, xAxis: { type: 'category', data: ['Q1','Q2','Q3','Q4'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [320, 480, 560, 740], itemStyle: { color: '#5470c6' } }] }); // 折线图 — 用户增长趋势 charts[2].setOption({ title: { text: '用户增长', left: 'center' }, xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] }, yAxis: { type: 'value' }, series: [{ type: 'line', smooth: true, data: [1200, 1800, 2400, 3100, 3900, 4800], areaStyle: { opacity: 0.3 } }] }); // 仪表盘 — 任务完成率 charts[3].setOption({ title: { text: '任务完成率', left: 'center' }, series: [{ type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 78, name: '进度' }], axisLine: { lineStyle: { color: [[0.5, '#91cc75'],[0.8, '#fac858'],[1, '#ee6666']] } } }] }); </script> </body> </html>

运行方式：将代码保存为 HTML 文件，用浏览器打开即可看到 4 个不同种类的图表同时展示。这是电商后台最常用的数据看板布局。