ECharts：百度开源的数据可视化图表库

为什么需要 ECharts：把数据可视化从手写变成声明式配置

数据分析流程中，出图往往是最后一公里。传统做法是手写 SVG/Canvas 绘制图表，需要自行处理坐标轴刻度、网格、图例、提示框、动画等大量底层细节；用 Excel 或静态图片则无法嵌入网页、无法交互、无法随数据实时更新。D3.js 虽然灵活，但其底层原语式的编程方式要求开发者自己实现缩放、提示框、坐标刻度等机制，项目周期和学习成本都偏高。

ECharts 将上述细节全部封装成声明式配置（声明式配置：用一份描述「要什么」的数据对象告诉库，而不是用代码逐条命令「怎么做」）。开发者只需给出包含 series（数据系列）、xAxis/yAxis（坐标轴）等字段的 option 对象，渲染、动画、交互由库自动完成。库内置 20 余种图表类型和 tooltip（悬停提示）、legend（图例）、dataZoom（数据缩放）、brush（框选刷取）、visualMap（按值映射颜色）等交互组件，多数场景不需要手写一行渲染逻辑。

与 D3.js「低层原语、完全自绘」的气质不同，ECharts 是「高封装、开箱即用」；与 Chart.js 相比，ECharts 图表类型更全、大数据渲染更稳、中文文档与国内社区更完善，适合作为团队的统一可视化底座。

安装与环境配置：3 步就绪

步骤一·安装。工程化项目推荐 npm 安装；无构建工具的页面推荐 CDN 引入完整包。

步骤二·准备容器。在 HTML 中放置一个 div 作为图表容器，并显式设置宽高。

步骤三·验证。命令行打印安装版本号；浏览器打开页面能看到折线图即安装成功。

# 工程化项目推荐 npm 安装npm init -ynpm install echarts # 验证安装版本node -e "const echarts = require('echarts'); console.log('ECharts', echarts.version)"

快速上手：5 分钟跑通第一个图表

最小可用流程是「引入库 → 准备容器 → 初始化实例 → 写 option → setOption 渲染」五步。ECharts 是完全由代码驱动的库，所以完整的可运行示例如下：

1. 引入 ECharts（npm import 或 CDN script）

2. 放置一个显式设置宽高的 div 容器

3. 调用 echarts.init(dom) 获得图表实例

4. 编写至少包含 xAxis、yAxis、series 三部分的 option 对象

5. 调用 chart.setOption(option) 渲染图表

6. 需要自适应时，在 window resize 事件中调用 chart.resize()

打开页面即可看到带悬停提示的折线图，鼠标移到数据点上会显示数值。进阶技巧：数据变化时再次 setOption 即可增量更新，5.0 起的 Universal Transition 会自动为数据变化补充过渡动画，无需手动处理重绘。

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="utf-8">  <title>ECharts 快速上手</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script></head><body>  <!-- 容器必须显式设置宽高 -->  <div id="chart" style="width: 600px; height: 400px;"></div>  <script>    const chart = echarts.init(document.getElementById('chart'));    chart.setOption({      xAxis: { type: 'category', data: ['周一', '周二', '周三'] },      yAxis: { type: 'value' },      series: [{ type: 'line', data: [120, 200, 150] }]    });  </script></body></html>

核心能力详解：5 大支柱

支柱一·20 余种图表类型。覆盖折线、柱状、饼图、散点等基础类，雷达、漏斗、仪表盘等专项类，以及桑基图、旭日图、树图、矩形树图、关系图、地图、箱线图、热力图、平行坐标、K 线图等高阶类；对以上均无法覆盖的需求，可走 custom series 自定义渲染用回调绘制任意图形。

支柱二·声明式 option 与数据驱动更新。option 是唯一配置入口，结构为 JSON 兼容对象，可由后端直接下发、前端零逻辑渲染。setOption 支持增量合并（只传变化的字段），数据更新自动带过渡动画；配 getOption 读取当前配置、clear 清空内容、dispose 销毁实例。

支柱三·交互组件矩阵。tooltip 富文本提示、legend 图例开关、dataZoom 缩放与平移、brush 框选、visualMap 按数据值映射颜色或尺寸、aria 模块提供无障碍描述。chart.on() 事件绑定支持点击、悬停、拖拽回调，可跨图表做联动。

支柱四·双渲染引擎与大数据性能。默认 Canvas 渲染器适合高频更新与大数据量；SVG 渲染器适合数据量小、要求文字清晰与无障碍的场景，init 时通过 renderer 参数切换。大数据优化组合：dataZoom 只渲染可视窗口、sampling 降采样抽取代表点、progressive 分片渐进渲染、appendData 流式追加，十万级数据点仍可保持交互流畅。

支柱五·扩展生态与主题体系。echarts-gl 提供 3D 地球、3D 柱图等 WebGL 能力；echarts-wordcloud 提供词云；bmap 对接百度地图。主题系统支持内置 light/dark 与 registerTheme 自定义主题，官方提供在线主题编辑器；社区封装了 vue-echarts（Vue 2/3）与 echarts-for-react（React）等组件库。

生产部署与监控：从上线到运维

部署方式一·按需引入减小产物体积。完整包的 dist/echarts.min.js 体积在数百 KB 到 1MB 级别，生产环境应使用官方推荐的按需引入方式，配合打包工具的 tree-shaking 只保留用到的模块：

部署方式二·CDN 与缓存策略。无构建场景（静态大屏、内嵌页面）直接用 CDN 完整版，固定版本号并配置长缓存，升级时手动更新版本号即可回滚。多页面共用时建议抽成公共资源，避免每个页面重复下载。

部署方式三·SSR 服务端渲染。ECharts 5.3 起支持在 Node 端将图表渲染为 SVG 字符串再注入 HTML，利于 SEO 与首屏加载；注意 SSR 模式下无交互事件，交互能力需浏览器端基于同一 option 二次初始化。

可观测性。内存方面：SPA 路由切换时必须 dispose() 释放实例，可用浏览器 Memory 面板对比切换前后实例数。自适应方面：window resize 事件防抖后调用 chart.resize()。性能方面：大数据场景开启 sampling/progressive 后用 Performance 面板观察脚本耗时；高频更新用 appendData 增量追加而非全量 setOption。错误处理方面：后端下发的 option 需做字段校验；地图 GeoJSON、字体等异步资源加载失败要有兜底提示。

<p class="para-label">避坑清单：</p>

<ul class="dash-list"><li>容器必须显式设置宽高，否则图表画布尺寸为 0，页面只有空白；ECharts 不会自动撑开容器，也不会按父元素自适应。</li><li>更新数据要用 setOption 增量合并，不要重复调用 echarts.init；重复 init 会残留多个 canvas 实例，导致内存泄漏、事件重复绑定和页面卡顿。</li><li>数据量上万后要主动开启 dataZoom 或 sampling 降采样，默认全量渲染会在交互时明显掉帧；高频流式更新用 appendData 代替全量 setOption。</li><li>SPA 中切换路由或销毁组件时必须调用 dispose() 释放实例，否则 canvas 与事件监听常驻内存，长时间运行后页面越来越卡。</li><li>生产构建务必用 echarts/core 按需引入并配合 tree-shaking，直接全量引入会把完整包打进产物，显著增大首屏体积。</li></ul>

import * as echarts from 'echarts/core';import { BarChart, LineChart } from 'echarts/charts';import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';import { CanvasRenderer } from 'echarts/renderers'; echarts.use([BarChart, LineChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]);

const echarts = require('echarts');const chart = echarts.init(null, null, {  renderer: 'svg', ssr: true, width: 600, height: 400});chart.setOption(option);const svg = chart.renderToSVGString(); // 返回可直接输出的 SVG 字符串

版本迭代

ECharts 2013 年由百度发布 1.0，2015 年 2.0 完善图例与坐标系体系，2017 年 3.0 重写底层、引入双渲染引擎，2018 年 4.0 捐赠 Apache 并强化无障碍，2020-12 的 5.0 完成模块化重构并引入动态叙事，此后保持每年 1-2 个次版本迭代，5.5.x 为当前稳定线。

AI 应用场景

常见误区

面试题

参考来源

• webpageECharts 官网官方首页、下载与项目简介
• webpageECharts 官方示例可运行示例与源码