第9章 Web 前端可视化（ECharts）
ECharts 的核心就一件事：读懂 option。看懂结构，任何图都能自己配出来。
本章学习目标
- 能在网页中引入 ECharts 并初始化图表
- 能读懂并修改 option 的五大块配置
- 能实现柱、折、饼、散点、地图与组合图
- 能做交互（tooltip、legend、dataZoom）与响应式适配
本章导览
核心内容
9.1
最小可用示例
四个步骤：引库 → 准备容器 → init → setOption。离线环境把 echarts.min.js 放在本地即可。
9.1.1
四步初始化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>第一张 ECharts 图</title>
<script src="echarts.min.js"></script> <!-- 本地引入，离线可用 -->
<style>#main { width: 800px; height: 420px; }</style>
</head>
<body>
<div id="main"></div>
<script>
const chart = echarts.init(document.getElementById('main'));
chart.setOption({
title: { text: '各省销售额（万元）' },
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['广东', '江苏', '山东', '浙江'] },
yAxis: { type: 'value' },
series: [{ name: '销售额', type: 'bar',
data: [820, 610, 540, 480],
itemStyle: { color: '#4E7CFF' } }]
});
window.addEventListener('resize', () => chart.resize()); // 自适应
</script>
</body>
</html>9.2
option 的五大块
option 结构速记
| 配置块 | 控制什么 | 常用项 |
|---|---|---|
| title | 标题 | text / subtext / left |
| tooltip | 悬浮提示 | trigger: axis(轴触发) | item(项触发) |
| legend | 图例（多系列） | data / top |
| xAxis / yAxis | 坐标系 | type: category | value | time；axisLabel.rotate |
| series | 数据与图形 | type / data / stack / itemStyle |
| dataZoom | 缩放（大数据量） | type: inside | slider |
9.3
常见图形与交互
// 折线图（多系列 + 平滑）
series: [
{ name: '2024', type: 'line', smooth: true, data: [120, 200, 150, 80] },
{ name: '2025', type: 'line', smooth: true, data: [140, 260, 190, 120] }
]
// 饼图（环形）
series: [{
type: 'pie', radius: ['45%', '70%'],
label: { formatter: '{b}\n{d}%' },
data: [{ value: 1048, name: '线上' }, { value: 735, name: '门店' }]
}]
// 堆叠柱状图
series: [
{ name: 'A', type: 'bar', stack: 'total', data: [120, 132, 101] },
{ name: 'B', type: 'bar', stack: 'total', data: [220, 182, 191] }
]
// 大数据量加缩放
dataZoom: [{ type: 'inside' }, { type: 'slider' }]官方示例站（echarts.apache.org/examples）是最好的模板库：找到相似图，复制 option，改数据与文字即可——不需要背 API。
本章小结
本章讲 Web 端可视化的落地方式：用四步（引库、容器、init、setOption）跑通最小示例，把 option 拆成 title/tooltip/legend/坐标轴/series 五大块记忆，再通过折线、环形饼、堆叠柱与 dataZoom 覆盖常见交互，并强调"改示例比背 API 快"。
思考与练习 先自己做，再点开答案
01
ECharts 图表不显示，最先检查哪三件事？
查看参考答案
① 容器 div 是否有明确的宽高（没有高度图表不显示）；② option 是否真的传给了 setOption；③ echarts.min.js 是否加载成功（控制台看 404 或 echarts is not defined）。
02
要做"2024 与 2025 两条折线对比"，option 里怎么组织？
查看参考答案
在 series 里放两个对象，type 都为 line，各自 name 与 data；legend 会自动按 name 生成，tooltip trigger 用 axis 便于同月对比。
03
页面窗口变小，图表没有跟着变，怎么修？
查看参考答案
监听 resize 调用 chart.resize()；若容器在弹窗/隐藏标签页里，还需在显示后调用 resize。