3. ECharts 入门：简介、安装与第一个实例
好，咱们正式开始动手了。这一章我带你走一遍 ECharts 的入门流程。说白了，就是搞清楚它是什么、怎么装到项目里、以及怎么跑起来第一个图表。
很多新手容易在「引入」这一步卡住，搞不清 CDN 和 npm 到底该用哪个。别急，我当年也踩过这个坑，咱们一个一个说清楚。
3.1 ECharts 是什么？
ECharts，全称 Enterprise Charts，是百度开源的一个数据可视化库。你想想看，大屏上那些炫酷的折线图、柱状图、地图，背后大概率就是它。
我个人习惯把它叫做「图表界的瑞士军刀」。为什么？因为它功能太全了：
- 图表类型丰富：折线图、柱状图、饼图、散点图、雷达图、地图……你能想到的，它基本都有
- 交互能力强：缩放、拖拽、数据筛选，用户可以直接在图表上操作
- 配置灵活：几乎每个视觉元素都能自定义，颜色、字体、动画，随你调
- 性能不错：百万级数据量下，渲染依然流畅
我在项目中遇到过最夸张的一次，客户要求在一个页面上同时展示 12 个图表，还要能实时刷新。ECharts 扛住了，而且没崩。嗯，从那以后我对它就很放心。
3.2 安装与引入
引入 ECharts 有两种主流方式：CDN 和 npm。选哪个？看你的项目场景。
3.2.1 CDN 引入（适合快速原型、静态页面）
如果你只是写个 Demo，或者做一个简单的静态大屏，CDN 是最快的。直接在 HTML 里加一行 script 标签就行。
<!-- 使用 CDN 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>我建议你固定版本号，别用 latest。为什么？因为版本升级可能会带来 API 变化，你昨天写的代码今天可能就跑不通了。我曾经吃过这个亏，上线前一天发现图表全白了，排查了半天才发现是 CDN 自动升级到了新版本……
https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js，加载速度更快。
3.2.2 npm 引入（适合工程化项目）
如果你在用 Vue、React 这类框架，或者项目需要模块化管理，那就用 npm。
# 安装 ECharts
npm install echarts --save然后在代码里引入：
// 按需引入（推荐）
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]);
// 或者全量引入（简单但体积大）
// import * as echarts from 'echarts';我个人习惯用按需引入。你想想看，一个大屏项目可能只用三四种图表类型，全量引入会把所有图表代码都打包进来，体积白白多了几百 KB。对于性能敏感的大屏来说，不值得。
echarts.dispose() 释放实例，否则会造成内存泄漏。我见过有人上线后浏览器内存飙到 2GB，就是因为这个。
3.3 第一个 ECharts 实例：Hello World 图表
好，理论说完了，咱们直接写代码。下面是一个最简单的柱状图，我把它叫做「Hello World 图表」。
3.3.1 准备一个容器
首先，在 HTML 里放一个 div，用来放图表。
<div id="main" style="width: 600px; height: 400px;"></div>注意，这个 div 必须设置宽高。如果不设，ECharts 不知道画布有多大，图表就显示不出来。嗯，这个坑我刚开始也踩过。
3.3.2 初始化图表实例
// 获取容器 DOM 元素
var chartDom = document.getElementById('main');
// 初始化 ECharts 实例
var myChart = echarts.init(chartDom);echarts.init() 会返回一个图表实例，后续所有操作都通过这个实例来完成。
3.3.3 配置图表选项
ECharts 的核心就是 option 对象。你告诉它「我要画什么、数据是什么、长什么样」，它就能渲染出来。
// 指定图表的配置项和数据
var option = {
title: {
text: 'Hello ECharts'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};这里我解释一下几个关键字段：
- title：图表的标题，显示在顶部
- tooltip：鼠标悬停时显示的提示框
- xAxis / yAxis：坐标轴，定义数据的维度和范围
- series：核心数据系列，
type: 'bar'表示柱状图，data是具体数值
3.3.4 渲染图表
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);就这一行，图表就出来了。是不是很简单？
3.3.5 完整代码
把上面几段拼起来，就是一个完整的 HTML 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个 ECharts 图表</title>
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script>
// 基于准备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'Hello ECharts'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>3.4 避坑指南
最后，分享几个我实际开发中遇到的坑，你提前知道，能省不少时间。
如果你用
display: none 隐藏了容器，或者容器还没渲染完成就初始化 ECharts，图表会显示不出来。解决办法：在容器显示后再调用 init()，或者用 resize() 重新调整。
很多人以为重新
setOption 就行，但如果不设置 notMerge: true，ECharts 会合并新旧配置，导致一些意料之外的效果。我建议每次更新数据时这样写：myChart.setOption(newOption, true)。
大屏项目经常有页面切换或窗口缩放。记得监听
window.resize 事件，调用 myChart.resize()。我一般这样写：window.addEventListener('resize', function() { myChart.resize(); });
好了，这一章的内容就到这。你跟着代码跑一遍，应该就能看到第一个图表了。下一章咱们会深入讲 ECharts 的核心配置项，到时候你会发现自己能控制的东西远比想象的多。
公众号:蓝海资料掘金营，微信deep3321