echarts 是百度开源的 JavaScript 可视化图表库，可以在网页里面快速生成折线图 柱状图 饼图 散点图 地图等各类数据图表，它不需要后端复杂绘图，只需要在前端页面引入 echarts 文件，准备一个 DOM 容器，再配置 option 参数对象，调用 init 和 setOption 方法就可以渲染图表，是数据大屏 后台管理系统最常用的图表组件，很多前端新手学习的时候，难点集中在 option 配置项层级多，不理解 series xAxis yAxis 这些核心字段，只要掌握基础渲染流程，再逐个熟悉配置项，就可以快速上手。echarts 底层依赖 canvas 渲染，支持响应式自适应，支持 tooltip 提示框 legend 图例 数据缩放 动画交互，既可以 CDN 直接引入，也可以在 vue react 项目里面通过 npm 安装使用，两种方式适合不同开发场景。

基础核心概念对照表

引入方式

第一种 CDN 引入，适合静态 html 页面快速测试，在 html 头部引入 echarts.min.js，不需要打包工具

第二种 npm 安装，适合 vue react 工程，执行 npm install echarts，在页面里面 import echarts 导入，vue 项目还可以使用 vue echarts 封装组件

最小可运行示例 基础柱状图

1 准备 html 页面，写入一个 div，给这个 div 设置 id，同时设置宽度和高度

2 引入 echarts

3 编写 js 代码，通过 id 获取 dom，执行 echarts.init 得到 chart 实例

4 定义 option 对象，里面设置 title 标题 tooltip 提示 legend 图例，xAxis 设置类目数据，yAxis 设置数值轴，series 里面 type 设置为 bar，data 填入对应数值

5 调用 chart.setOption option，页面就渲染出柱状图

6 增加窗口 resize 监听，当浏览器窗口大小变化的时候调用 chart.resize，实现图表自适应

进阶配置讲解

常用图表类型切换

只需要修改 series 里面 type 的值，bar 是柱状图，line 是折线图，pie 是饼图，scatter 散点图，map 地图，graph 关系图，同一个实例可以切换图表类型，重新 setOption 就会重绘。

常用交互配置

tooltip 鼠标悬浮显示数据详情

legend 图例，可以点击图例隐藏或者显示对应数据系列

dataZoom 区域缩放，适合大数据折线图

toolbox 工具栏，内置下载图片 刷新 缩放功能

数据更新

已经初始化的图表，不需要重新 init，直接调用 setOption 传入新的数据，就可以动态刷新图表，适合轮询接口获取实时数据的场景。

销毁实例

页面切换组件卸载的时候，要调用 chart.dispose 销毁实例，释放内存，否则单页应用里面会出现内存泄漏，这是 vue react 项目非常容易踩坑的点。

完整学习步骤

1 搭建环境，先用 CDN 写第一个 hello 柱状图，跑通 init setOption 基础流程

2 熟悉 option 核心字段，练习折线图 饼图，理解 series xAxis yAxis

3 学习样式自定义，修改颜色 字体 坐标轴刻度 背景色

4 学习动态数据，接口请求之后 setOption 更新图表

5 学习自适应 resize，组件卸载 dispose

6 进阶学习地图 自定义系列 主题切换 大数据性能优化

整套 echarts 学习重点就是理解 option 配置体系，所有可视化效果都是修改 option 里面的参数，不需要记住全部字段，日常开发可以对照官方文档按需查询，掌握基础渲染流程之后，各类图表都可以快速实现。

【常见问题】

问题 1 echarts 教程里面图表不显示是什么原因

回答 1 echarts 教程练习图表不显示，常见原因是 div 容器没有设置宽高，dom 还没有加载完成就执行 init，或者 option 配置写错，学习 echarts 教程的时候优先排查这三点。

问题 2 echarts 教程里面 vue 项目怎么引入 echarts

回答 1 echarts 教程在 vue 工程里面推荐 npm 安装 echarts，在组件内 import 导入，在 mounted 生命周期初始化实例，组件 beforeUnmount 调用 dispose，是 vue 项目标准写法。

问题 3 echarts 教程里面 setOption 可以多次调用吗

回答 1 echarts 教程里面 setOption 支持多次调用，多次 setOption 会合并更新图表数据，动态刷新数据的时候就是反复调用 setOption，不需要每次重新 init 实例。

问题 4 echarts 教程里面 resize 有什么作用

回答 1 echarts 教程里面 resize 用来实现图表自适应，浏览器窗口大小改变之后调用 chart.resize，图表会重新计算尺寸，否则窗口缩放之后图表会变形错位。

【免责申明】

本文 echarts 教程为通用入门学习参考，echarts 官方版本持续迭代，部分配置项在新版本可能发生变更，学习请以 echarts 官方最新文档为准，项目开发请根据实际版本适配，因版本差异造成代码报错由使用者自行承担。