哈喽，欢迎来到数据可视化的奇妙世界！我是Agnes。
我知道你现在的想法：“Echarts？那是不是很难？是不是要背很多参数？是不是只有程序员才能玩？”
停停停，打住！把这些念头统统丢掉。Echarts其实就是个“懂中文的画图表工具”。你只需要会写一点基础的HTML，就像给网页搭个架子，然后告诉Echarts：“嘿，我想画个柱状图，数据是这些，颜色要好看点”，它就会乖乖给你画出来。
今天这篇指南，我不跟你扯什么“大数据时代的可视化趋势”，那些太虚了。咱们直接上手，从“这是什么”到“你也能做出酷炫的图表”，一步一步来。我会把每一个坑都标出来，还会给你演示怎么像搭积木一样把图表拼进你的网页里。
准备好了吗？咱们开始！
第一章：Echarts到底是啥？为啥大家都爱用它？
首先，咱们得聊聊为什么要有Echarts。
你想想，以前我们看数据，是不是就是一堆数字？100、200、300……看半天也不知道咋回事。但是，如果把这些数字画成图呢？一眼就能看出谁高谁低，谁在涨谁在跌。这就是数据可视化的魅力——把枯燥的数据变成直观的画面。
那Echarts是干嘛的？
Echarts（发音类似“E-charts”）是百度开源的一个用JavaScript实现的可视化库。简单来说，它是一堆现成的、画图表的代码工具包。你不需要从零开始写怎么画圆、怎么画柱子、怎么加坐标轴，这些Echarts都帮你搞定了。你只需要做一件事：填数据。
为啥这么多人爱用它？我给你列几个实在的理由：
- 免费开源：这可是B站（Bilibili）都在用的东西，社区巨大，遇到问题随便一搜就有答案。
- 图表丰富：柱状图、折线图、饼图、散点图、地图、雷达图、热力图……你想得到的它基本都有，想不到的它可能也有。
- 支持自定义：颜色、字体、提示框、工具箱，你想怎么改就怎么改，自由度超高。
- 兼容性好：不管你是用jQuery、Vue、React，还是原生JavaScript，它都能跑得起来。
- 文档给力：虽然文档有点长，但 examples（例子）特别多，你直接复制别人的代码改改数据就能用。
说个真实的小故事吧。我有个朋友，以前做财务报表的，每天对着Excel表格头疼。后来他学会了用Echarts把报表变成动态网页，领导一看：“哇，这个趋势图好清晰！” 从此以后，他升职加薪，还成了公司里的“可视化大神”。所以，学Echarts，不只是学个技术，更是给你自己增加一个发光点！
第二章：零基础准备——你只需要这三样东西
别被“网页开发”这四个字吓到了。其实你只需要准备三样东西，就能开始你的Echarts之旅。
1. 一个文本编辑器
你不需要什么昂贵的软件，随便找个能写代码的地方就行。
- 推荐：VS Code（Visual Studio Code）。免费、好用、插件多，是现在最流行的代码编辑器。
- 备选：Sublime Text、记事本（虽然不推荐，但应急也可以）。
安装好VS Code后，你可以装一个插件叫“Live Server”，这样你保存HTML文件后，浏览器会自动刷新，不用再手动点刷新了。超方便！
2. 一个浏览器
Chrome、Edge、Firefox都可以。咱们就用Chrome吧，开发者工具好用，方便你调试。
3. 最基本的HTML知识
你不需要成为HTML专家，但得知道这三句话是什么意思：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Echarts图表</title>
</head>
<body>
<!-- 这里写内容 -->
</body>
</html>
<!DOCTYPE html>：告诉浏览器“我是个HTML5文档”。<html>：整个网页的根标签。<head>：放标题、样式、引用文件的地方，用户看不见。<body>：用户看见的内容都放这里。
还有两个最重要的标签你要认识：
<div>：一个盒子，用来装东西。咱们画图表，就要先建一个“盒子”。<script>：用来写JavaScript代码，或者引用外部的JS文件。
第三章：第一次见面——你的第一个“Hello World”图表
好了，废话不多说，咱们马上动手！
第一步：创建项目文件夹
在你的电脑上，新建一个文件夹，比如叫echarts-demo。打开VS Code，把这个文件夹拖进去。
第二步：创建HTML文件
在文件夹里新建一个文件，命名为index.html。
第三步：引入Echarts
这是最关键的一步。Echarts不是一个可以直接写在HTML里的东西，它是个外部库。咱们有两种方式引入：
方式一：本地下载（推荐新手用，稳定）
- 去Echarts官网：https://echarts.apache.org/zh/download.html
- 下载“完整版”的
echarts.min.js。 - 把它放在你的
echarts-demo文件夹里，比如放在一个叫js的子文件夹里。
方式二：CDN在线引入（方便，但需要联网）
在HTML的<head>里加一行：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
今天咱们用本地下载的方式，这样你断网也能用，心里更有底。
第四步：写代码！
打开index.html，输入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个Echarts图表</title>
<!-- 引入Echarts -->
<script src="js/echarts.min.js"></script>
<style>
/* 给图表容器一个高度，否则图表会看不见 */
#main {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<!-- 这是图表的“画布” -->
<div id="main"></div>
<script>
// 1. 初始化Echarts实例
// 这一步就像是在空白画布上准备好画画
var myChart = echarts.init(document.getElementById('main'));
// 2. 配置项：告诉Echarts要画什么
var option = {
// 标题
title: {
text: '我的第一个柱状图'
},
// 提示框：鼠标悬停时显示的数据
tooltip: {},
// 图例：显示在右上角的小圆圈，用来区分不同系列
legend: {
data: ['销量']
},
// X轴：横坐标
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
// Y轴：纵坐标
yAxis: {},
// 系列列表：具体画什么数据
series: [{
name: '销量',
type: 'bar', // 图表类型：柱状图
data: [5, 20, 36, 10, 10, 20] // 具体数据
}]
};
// 3. 把配置项交给Echarts去渲染
myChart.setOption(option);
</script>
</body>
</html>
第五步：运行！
在VS Code里，右键index.html，选择“Open with Live Server”。浏览器会自动打开，你应该能看到一个漂亮的柱状图了！
恭喜你！你已经迈出了第一步！
是不是很简单？别急，咱们来拆解一下这段代码，让你真正理解它在干嘛。
第四章：代码拆解——每个部分都在干什么？
刚才的代码你可能看懵了，没关系，咱们把它拆成三块，一块一块看懂。
第一块：初始化
var myChart = echarts.init(document.getElementById('main'));
echarts.init()：这是Echarts的初始化函数。它需要一个“容器”，也就是你在HTML里写的那个<div id="main">。document.getElementById('main')：这是JavaScript获取HTML元素的方法，意思是“找到id为main的那个div”。- 这一步就像是你告诉Echarts：“嘿，我要在这个盒子里画画，你给我准备一下。”
第二块：配置项（Option）
这是Echarts的核心，所有的图表信息都放在这里。你可以把它想象成一个“菜单”，你点哪些菜，它就给你做哪些菜。
- title：标题。你可以设文字、位置、样式。
- tooltip：提示框。鼠标悬停时显示的信息。
- legend：图例。就是那些小圆圈，点击可以显示/隐藏某个系列。
- xAxis：X轴。
data数组里的内容就是横坐标的标签。 - yAxis：Y轴。通常不用写太多，Echarts会自动根据数据生成。
- series：系列。这是最重要的部分！
name：系列名称，对应legend。type：图表类型。bar是柱状图，line是折线图，pie是饼图，scatter是散点图……data：具体数据。柱状图是一个数组，折线图也可以是一个数组，饼图是对象数组（后面讲）。
第三块：渲染
myChart.setOption(option);
- 这一步就是把刚才的“菜单”交给Echarts，让它去画。
setOption的意思是“设置选项”，你可以多次调用它来更新图表。
第五章：常见图表类型——柱状图、折线图、饼图
光会柱状图可不够，咱们再把最常见的三种图表学会。
1. 折线图（Line Chart）
折线图适合展示趋势，比如气温变化、股价走势。
把刚才代码里的type: 'bar'改成type: 'line'，把data改成另一组数据：
series: [{
name: '气温',
type: 'line',
data: [10, 12, 15, 18, 20, 22]
}]
再加点样式，让折线更漂亮：
series: [{
name: '气温',
type: 'line',
data: [10, 12, 15, 18, 20, 22],
smooth: true, // 平滑曲线
areaStyle: { // 填充区域
color: 'rgba(0, 128, 255, 0.2)'
}
}]
2. 饼图（Pie Chart）
饼图适合展示占比，比如市场份额、预算分配。
饼图的配置跟柱状图不太一样，主要区别在series里：
series: [{
name: '占比',
type: 'pie',
radius: '50%', // 饼图半径
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' }
]
}]
注意哦，饼图的data是对象数组，每个对象有value（数值）和name（名称）。
3. 散点图（Scatter Chart）
散点图适合展示关系，比如身高体重的关系、广告投入和销量的关系。
series: [{
name: '散点',
type: 'scatter',
data: [
[10, 8.04],
[8, 6.95],
[13, 7.58],
[9, 8.81],
[11, 8.33],
[14, 9.96],
[6, 7.24],
[4, 4.26],
[12, 10.84],
[7, 4.82],
[5, 5.68]
]
}]
data是一个二维数组，每个内层数组是[x, y]坐标。
第六章：交互式图表——让图表“动”起来
Echarts最厉害的地方，不仅仅是能画图，还能交互。用户点击、悬停、缩放，图表都能做出反应。
1. 提示框（Tooltip）
刚才咱们提到了tooltip，它默认是鼠标悬停时显示数据。但你可以自定义它：
tooltip: {
trigger: 'axis', // 触发方式：轴触发（柱状图、折线图）或项触发（饼图）
formatter: '{b}: {c}' // 自定义格式：类别: 数值
}
2. 图例（Legend）点击
图例默认可以点击，点击后显示/隐藏对应系列。这是Echarts自带的功能，不用写代码。
3. 数据区域缩放（DataZoom）
有时候数据太多，看不完怎么办？加个缩放条！
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', ...] // 更多数据
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider', // 滑块类型
start: 0,
end: 50 // 默认显示前50%
},
{
type: 'inside', // 鼠标滚轮缩放
start: 0,
end: 50
}
]
4. 点击事件
你想让用户点击图表的某个柱子，然后跳转到另一个页面？或者弹出提示？可以加点击事件：
myChart.on('click', function(params) {
alert('你点击了：' + params.name + '，数值是：' + params.value);
});
params是一个对象，里面有name（类别名）、value（数值）、seriesName（系列名）等信息。
第七章：进阶技巧——让图表更专业
1. 响应式图表
你的图表在不同屏幕大小上都能自适应显示吗？加一行代码：
window.addEventListener('resize', function() {
myChart.resize();
});
这样，当浏览器窗口大小改变时，图表会自动调整大小。
2. 主题（Theme）
Echarts官方提供了一些现成的主题，比如dark（深色主题）、shine（亮光主题）。你可以通过init时的第二个参数指定主题：
var myChart = echarts.init(document.getElementById('main'), 'dark');
3. 异步加载数据
实际项目中，数据往往是从服务器获取的，不是硬编码的。用fetch或ajax获取数据：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
myChart.setOption({
xAxis: { data: data.categories },
series: [{ data: data.values }]
});
});
4. 图表联动
想象一下，你有两个图表：一个柱状图，一个饼图。当你点击柱状图的某个柱子时，饼图会自动显示该柱子对应的详细数据。这怎么做？
// 柱状图点击事件
myChartBar.on('click', function(params) {
// 饼图更新数据
myChartPie.setOption({
series: [{
data: getDetailData(params.name)
}]
});
});
第八章：实战项目——做一个“销售数据看板”
光说不练假把式。咱们来做一个完整的项目：一个销售数据看板，包含柱状图、折线图、饼图，并且支持联动。
项目结构
sales-dashboard/
├── index.html
├── css/
│ └── style.css
├── js/
│ ├── echarts.min.js
│ └── main.js
└── data/
└── sales.json
HTML文件（index.html）
”`html <!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>销售数据看板</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/echarts.min.js"></script>
<h1>2024年销售数据看板</h1>
<div class="dashboard">
<div class="chart-box">
<h3>月度销售额（柱状图）</h3>
<div id="barChart" style="height: 300px;"></div>
</div>
<div class="chart-box">
<h3>销售趋势（折线图）</h3>
<div id="lineChart" style="height: 300px;"></div>
</div>
<div class="chart-box">
<h3>产品占比（饼图）</h3>