主题
echarts基本的使用与echarts标题与xy轴的组件讲（Day10 1/2）
本页对应 day10，共 5 段视频，约 2 小时 17 分。
学习目标
- 能够引入 ECharts 依赖包，创建具备明确宽高的容器，并通过
echarts.init初始化实例、使用setOption渲染图表。 - 能够配置
title、xAxis、yAxis、series等核心组件，说明标题、坐标轴和系列配置项的作用并完成基础图表搭建。 - 能够独立实现柱状图，配置分类轴、数据、柱条颜色、宽度、背景、标签及多系列数据，并验证渲染结果。
- 能够独立实现折线图，配置平滑曲线、区域填充、拐点样式、数据标签及坐标轴两侧留白，并修正折线图显示问题。
- 能够独立实现饼图，配置数据、半径、位置、标签、视觉引导线及扇形颜色，并处理标签超出容器的问题。
- 能够使用
grid布局组件调整图表与容器的间距，并通过浏览器实际效果验证配置项修改是否生效。
知识点
先认清 ECharts：它解决什么问题
为什么需要：首页要做工作报表，柱状图、折线图、饼图这类可视化如果拿 div 硬画，坐标、刻度、数据映射都很麻烦。ECharts 是基于 JavaScript 的开源可视化图表库，底层涉及 Canvas/SVG，适合快速做数据报表。
怎么想：先知道它是什么、能做什么，再去看官网示例和配置项。官网示例覆盖折线图、柱状图、散点图、K 线、地图、雷达图、热力图、关系图、3D 等；实际项目里最常用的是柱状图、折线图、饼图。
怎么做：获取 ECharts 可以用 CDN、npm，也可以在官网“在线定制”按需勾选后下载。开发中常用 CDN 或本地 echarts.min.js。学习时先看“使用手册”，不要一上来死磕 API。
易错点：不要把 ECharts 当成业务框架；它只负责图表渲染。配置项很多，不需要背完，但要知道“有这个能力”，用的时候能回官网查。
三步上手：引包、容器、初始化
为什么需要：ECharts 必须挂载到页面容器里，容器没有高度就什么都看不见。
怎么想：固定三步——引包、准备有高宽的容器、初始化实例并 setOption。
怎么做：
html
<div id="app" style="width:600px;height:400px;border:1px solid #000"></div>
<script src="./echarts.min.js"></script>
<script>
const chart = echarts.init(document.getElementById('app'));
const option = {
title: { text: '柱状图', left: 'center', textStyle: { color: 'red' } },
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
axisLine: { show: true },
axisTick: { show: true }
},
yAxis: {
axisLine: { show: true },
splitLine: { show: true, lineStyle: { color: 'red' } }
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
barWidth: 30,
itemStyle: {
color: params => ['red', 'orange', 'gold', 'green', 'blue'][params.dataIndex]
}
}]
};
chart.setOption(option);
</script>易错点：echarts.init 要传 DOM 节点，不是 CSS 选择器字符串；容器必须有高度；初始化后控制台无报错但页面空白，先查容器尺寸和 setOption 是否执行。
配置对象与组件：title、xAxis、yAxis
为什么需要：图表标题、坐标轴、刻度、分割线都属于“组件”，它们决定图表外观。
怎么想：setOption 接收一个配置对象，每个键对应一个组件。title 管标题，xAxis/yAxis 管坐标轴，series 管图形。
怎么做：标题可设 text、link、left/top/right/bottom、textStyle；X 轴用 type:'category' 让柱子在 X 轴均匀分布；Y 轴默认可能不显示轴线，可用 axisLine:{show:true} 打开；分割线用 splitLine，其 lineStyle 可调颜色、宽度、虚实。
易错点：xAxis 和 yAxis 通常要成对出现，不能只写一个就期待完整坐标系；category 是分类轴，别和数值轴混用；轴名称、轴线、刻度、分割线是不同配置项，找错位置会“改了没反应”。
series：柱状图、折线图、饼图
为什么需要：series 决定到底画什么图。一个容器可以放多个系列，也可以放多个图形。
怎么想：先定 type，再给 data。柱状图 type:'bar'，折线图 type:'line'，饼图 type:'pie'。数据可写基本数值，也可写 {name, value}。
怎么做：折线图常用 smooth:true 平滑曲线，areaStyle 填充区域；饼图用 radius 调大小，label.position 调标签位置，labelLine 调视觉引导线，itemStyle.color 可用回调函数按 dataIndex 分别设色。
js
series: [{
type: 'line',
smooth: true,
areaStyle: { color: 'rgba(0,0,0,0.1)' },
data: [10, 20, 30, 40, 50],
label: { show: true, position: 'top' }
}]js
series: [{
type: 'pie',
radius: [50, 80],
label: { position: 'outside' },
labelLine: { smooth: true, lineStyle: { color: 'red', width: 2, type: 'dashed' } },
itemStyle: {
color: p => ['gold', 'green', 'blue'][p.dataIndex]
},
data: [
{ name: '中国', value: 66 },
{ name: '菲律宾', value: 30 },
{ name: '蒙古', value: 20 }
]
}]易错点：折线图数据点位置不对，常是 X 轴默认两侧留白，可设 boundaryGap:false；饼图标签跑出容器，调小 radius 或加大容器；labelLine 一般饼图更常用，柱状图里不要硬套。
grid 与调试：让图表贴边、按文档找配置
为什么需要：图表默认和容器有距离，工作报表常要求图形与容器贴合；配置项多，必须会查文档和调试。
怎么想：布局用 grid 管上下左右距离；样式问题先判断属于哪个组件，再去官网配置项手册找。
怎么做：grid:{left:20,right:0,bottom:25,top:60} 调边距；grid 背景要生效需 show:true。调试时可 console.log(echarts) 看对象，确认 init 返回实例，再检查 setOption 的配置层级。
易错点：grid 不能随便归零，否则轴线、刻度可能被裁掉；不要背 API，要记住“肉眼可见的样式、位置、大小大多可调”，然后按组件查文档。
先明确：title、xAxis、yAxis 都是“组件”
为什么需要：ECharts 的 option 不是随便写键值，title、xAxis、yAxis、series 在官方文档里都叫“组件”。先认组件，再去查配置项，才不会把 color 写到错误层级。
怎么想：把 setOption({...}) 里的每个键理解成一个组件；组件右侧通常是对象，series 则是数组，一个对象代表一个图形。
怎么做：先写最小结构，再逐项加配置：
js
chart.setOption({
title: { text: '柱状图' },
xAxis: { type: 'category', data: ['中国', '菲律宾', '蒙古'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: [10, 20, 30] }]
});易错点：标题文字颜色要写 title.textStyle.color，不是 title.color；series 写成数组，才能在一个容器里放多个图形。
三步使用与容器高度
为什么需要：图表必须挂到一个有宽高的 DOM 容器里，否则初始化成功也看不见。
怎么想：按“引包 → 准备容器 → echarts.init 初始化实例 → setOption 配置”的顺序做。转写稿调试时反复强调：先看控制台有没有报错，再看容器里有没有生成 canvas。
怎么做：
html
<div id="app" style="width:600px;height:400px;border:1px solid #000"></div>
<script src="./echarts.min.js"></script>
<script>
const chart = echarts.init(document.querySelector('#app'));
chart.setOption({ /* 配置对象 */ });
</script>易错点：init 传的是 DOM 节点，不是 CSS 选择器字符串；容器没有高度时页面空白；引入路径错时控制台会报 echarts is not defined。
title 标题组件：文字、链接、样式、位置
为什么需要：标题用来说明图表主题，副标题补充说明；标题也能做超链接。
怎么想：先查 title 组件文档：text 主标题、subtext 副标题、link/target 超链接、textStyle 文字样式、itemGap 主副标题间距、left/top/right/bottom 位置。
怎么做：
js
title: {
text: '柱状图',
link: 'https://www.sina.com.cn',
target: '_blank',
left: 'center',
textStyle: { color: 'red', fontSize: 20, fontWeight: 900 },
subtext: '副标题',
itemGap: 20
}易错点：target 新窗口写 '_blank'；left 百分比按容器宽度计算；fontWeight 可写数字；标题不显示先查 show 和 text。
xAxis/yAxis：成对、类型、名称、轴线刻度分割线
为什么需要：直角坐标系图表要用 X/Y 轴承载分类和数值；柱状图要在 X 轴均匀分布，折线图要处理两侧留白。
怎么想：xAxis、yAxis 是组件；柱状图常写 xAxis.type: 'category'；折线图零点偏移要找 xAxis.boundaryGap: false；轴线、刻度、分割线分别查 axisLine、axisTick、splitLine。
怎么做：
js
xAxis: {
type: 'category',
data: ['中国', '菲律宾', '蒙古'],
name: '国家',
nameLocation: 'middle',
nameGap: 20,
axisLine: { show: true, lineStyle: { color: 'red', width: 2, type: 'dashed' } },
axisTick: { show: true, lineStyle: { color: 'red' } },
splitLine: { show: false }
},
yAxis: {
type: 'value',
axisLine: { show: true },
axisTick: { show: true },
splitLine: { show: true, lineStyle: { color: ['red', 'orange', 'yellow'], width: 1 } }
}易错点：本节演示中强调 xAxis 与 yAxis 要成对写，不用某轴可 show:false，不能只写一个；轴名称中间位置用 nameLocation:'middle'，不是 CSS 的 center；Y 轴刻度不显示要单独设 yAxis.axisTick.show；折线图边界偏移用 boundaryGap:false 修正。
调试过程：从空白到可见
为什么需要：ECharts 配置项多，调试要按层排查，不能盲改。
怎么想：先确认包和容器，再确认实例和 setOption，最后查具体组件。
怎么做：控制台先看报错；打印 echarts 确认引包；打印 chart 确认实例；容器空白先量高度；标题不显示查 title；轴线不显示查 axisLine.show；箭头查 axisLine.symbol、symbolSize、symbolOffset；分割线查 splitLine.lineStyle。
易错点：不要背所有 API，但要记住“肉眼可见的样式、位置、大小大多可调”，找不到就回官方配置项文档按组件查。
一、先认识 ECharts：它解决什么问题
为什么需要：首页工作报表要做柱状图、折线图、饼图，手写 Canvas 成本高；ECharts 是基于 JavaScript 的开源可视化图表库，底层用 Canvas/SVG 绘制，适合快速做数据报表。怎么想：先把它当成“配置驱动的图表库”，不是自己一笔一笔画图，而是准备容器、初始化实例、传入配置对象。怎么做：到 ECharts 官网看示例和“配置项手册”，依赖包可用官网下载、CDN 或 npm 获取；开发时常用压缩版 echarts.min.js。易错点：ECharts 不是“each chance/一叉子”，单词要写对；官网示例只能看效果，真正要查的是配置项 API。
二、三步使用流程与容器高度
为什么需要：ECharts 必须知道图表画在页面哪个区域，而且区域没有高度就什么都看不见。怎么想：流程固定为“引包 → 准备有高宽的容器 → 初始化实例并 setOption”。怎么做：先写一个 div，例如 id="app"，CSS 给它 width:600px、height:400px，再引入 echarts.min.js。易错点：div 默认高度不可靠，务必显式写 height；容器可理解为 Vue 的“挂载点”，但这里传的是 DOM 节点。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#app { width: 600px; height: 400px; border: 1px solid #000; }
</style>
</head>
<body>
<div id="app"></div>
<script src="./echarts.min.js"></script>
<script>
const chart = echarts.init(document.getElementById('app'));
const option = {
title: { text: '柱状图', left: 'center' },
xAxis: { type: 'category', data: ['苹果', '鸭梨', '香蕉', '橙子', '葡萄'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
};
chart.setOption(option);
</script>
</body>
</html>三、init 与 setOption：先拿实例，再传配置
为什么需要：ECharts 的所有图表行为都挂在实例上，配置对象决定画什么。怎么想：echarts.init 返回 ECharts 类实例，实例的 setOption 接收配置对象；配置对象的键不能随便写，必须查文档。怎么做：先打印 echarts 确认引包成功，再 init 容器，最后 setOption(option)。易错点：init 要传 document.getElementById('app') 这样的 DOM 节点，不是 '#app' 选择器字符串；只引包不写配置，页面空白但控制台无报错是正常的。
四、title 标题组件：文字、位置、样式
为什么需要：报表需要说明“这张图是什么”。怎么想：title 是组件，右侧是对象；text 是主标题，subtext 是副标题，left/top 调位置，textStyle 调颜色、字号、加粗。怎么做：如 title:{ text:'柱状图', left:'center', textStyle:{ color:'red', fontSize:20 } }。易错点：left 可写像素也可写百分比，百分比按容器宽度算；link/target 可做超链接，但别把 textStyle 写到 title 外层。
五、xAxis 与 yAxis：必须成对出现
为什么需要：柱状图要有水平分类轴和垂直数值轴。怎么想：xAxis、yAxis 都是组件；柱状图常用 xAxis.type='category' 让柱在 X 轴均匀分布，yAxis.type='value' 表示数值轴。怎么做：xAxis 配 data 分类，yAxis 配数值；轴线、刻度、分割线分别用 axisLine、axisTick、splitLine 调。易错点：只写 xAxis 会报错，通常要同时补 yAxis；不用某轴可隐藏，但不能只写一个还指望正常出图；grid 留白会让图不贴边。
六、series 柱状图：type、data 与 category
为什么需要：series 决定“到底画柱状、折线还是饼图”。怎么想：series 可写对象，也可写数组；一个对象是一个图形，数组可放多个系列。柱状图 type:'bar'，data 是数据。怎么做：series:[{ type:'bar', data:[10,20,30] }]；配合 xAxis.type:'category' 柱会均匀分布。易错点：type 写错就不出图；data 个数最好与分类数对应；多系列时 series 用数组，不是把两个对象塞进一个对象。
七、label、itemStyle、barWidth：让柱子可读可调
为什么需要：默认柱子不显示数值，颜色和宽度也常需调整。怎么想：label 是图形上的文本标签，show:true 显示值，position 调位置，rotate 旋转；itemStyle 是图形样式，color 可写颜色，也可写回调函数按 dataIndex 返回不同颜色；barWidth 调柱宽。易错点：颜色回调参数里有 value、dataIndex，别把数组下标写死；labelLine 主要用于饼图视觉引导线，柱状图一般不用。
八、grid 布局与多系列：让图表和容器贴合
为什么需要：默认绘图区四周有留白，报表常要求贴边或精确控制。怎么想：grid 是布局组件，left/right/top/bottom 控制绘图区与容器距离；背景色要 show:true 才生效。怎么做：grid:{ left:20, right:0, bottom:25, top:40 }；多系列就写 series:[{type:'bar',data:[...]},{type:'bar',data:[...]}]。易错点：grid 归零可能压住轴线刻度，通常留一点缝隙；多系列颜色、宽度仍可在各自 series 里调。
九、调试清单：从空白到出图
为什么需要：ECharts 配置项多，出错时要知道先查哪里。怎么想：先看控制台，再看容器，再看配置键。怎么做：空白先确认是否 setOption；有容器无图查 height；init 报错查 DOM 节点；只写 xAxis 报错就补 yAxis；柱子挤在一起查 category；标签跑出容器查 grid、半径或宽高。易错点：同音字要纠正为 ECharts、Canvas、SVG、Vue、React、Angular、Bootstrap、CDN、npm、API、series、xAxis、yAxis、title、label、itemStyle、areaStyle、smooth、boundaryGap、category、bar、line、pie、grid、axisLine、axisTick、splitLine、labelLine、position、textStyle、radius、center、type、data、name、value、symbol、symbolSize、focus、emphasis、lineStyle、borderWidth、borderColor、backgroundStyle、showBackground、barWidth、show、tooltip。
课堂画面
代码示例
示例 1：echarts 基本使用（引包 → 有高度的容器 → init → setOption）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01 echarts 基本使用</title>
<style>
* { margin: 0; padding: 0; }
/* 关键：容器必须有宽高，否则什么也看不见 */
#app {
width: 600px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- 第一步：引包，取 dist 下的压缩版 echarts.min.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script>
// 第二步：初始化 echarts 实例，参数是 DOM 节点，不是 CSS 选择器
var myChart = echarts.init(document.getElementById('app'));
// 第三步：准备配置对象，每个 key 都是一个"组件"
var option = {
title: {
text: '柱状图'
},
xAxis: {
type: 'category', // 让柱子在 X 轴上均匀分布
data: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar', // 图形类型：bar 柱状图
data: [10, 20, 30, 40, 50] // 图形要展示的数据
}
]
};
// 第四步：setOption 应用配置
myChart.setOption(option);
</script>
</body>
</html>要点与易错点：
echarts.init(document.getElementById('app'))必须传 DOM 节点；传'#app'字符串是易错点（课上就是这块报的错）。- 容器
#app必须写死高度，div默认高度为 0，没高度 = 一片空白。 option里的 key 不能瞎写，每个 key 对应官网的一个“组件”（title / xAxis / yAxis / series / grid …）。xAxis与yAxis要成对出现，只写xAxis会报错；不想要可以show: false隐藏，但不能只写一个。xAxis不写type: 'category'时，柱子不会在 X 轴上均匀分布（还会“干出去”）。- 只有引包 + 空白页面 + 控制台无报错，才说明环境没问题，可以继续写配置。
示例 2：标题组件与 X/Y 轴组件
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02 echarts 标题与 X/Y 轴组件</title>
<style>
* { margin: 0; padding: 0; }
#app { width: 700px; height: 400px; }
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('app'));
var option = {
/* ================= 标题组件 ================= */
title: {
show: true,
text: '柱状图', // 主标题文本
link: 'https://www.sina.com', // 主标题超链接
target: 'blank', // 新窗口打开
subtext: '副标题', // 副标题
itemGap: 20, // 主标题与副标题的距离
left: 'center', // 数字 / 百分比(按容器宽度) / 'center'
textStyle: {
color: 'red', // 支持 'red'、'#f00'、rgb()
fontSize: 24,
fontWeight: 900
},
subtextStyle: {
color: 'blue'
}
},
/* ================= X 轴组件 ================= */
xAxis: {
type: 'category', // 分类轴：柱子在 X 轴上均匀分布
data: ['中国', '美国', '俄罗斯', '英国', '法国'],
name: '国家', // 坐标轴名称
nameLocation: 'middle', // start / middle / end
nameGap: 30, // 轴名称与轴线的距离
nameTextStyle: {
color: 'green',
fontSize: 16
},
axisLine: { // 轴线
show: true,
symbol: ['none', 'arrow'], // 两端箭头：none / arrow
symbolSize: [15, 15],
symbolOffset: [0, 15],
lineStyle: {
color: 'red',
width: 1,
type: 'solid' // solid / dashed
}
},
axisTick: { // 刻度
show: true,
lineStyle: {
color: 'red',
type: 'dashed',
width: 1
}
},
axisLabel: {
color: '#333',
fontSize: 14
}
},
/* ================= Y 轴组件 ================= */
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: { color: '#333', width: 1 }
},
axisTick: { show: true },
splitLine: { // 分割线
show: true,
lineStyle: {
color: ['red', 'orange', 'yellow'], // 支持数组，逐条变色
width: 1,
type: 'dashed'
}
}
},
series: [
{ type: 'bar', data: [10, 20, 30, 40, 50] }
]
};
myChart.setOption(option);
</script>
</body>
</html>要点与易错点：
title.left写数字是像素，写'20%'是按容器宽度算百分比，'center'是居中；top/right/bottom同理。nameLocation只有start / middle / end三个值，改完记得用nameGap把名称和轴线拉开，否则文字会压在一起。- 轴线的箭头靠
axisLine.symbol: ['none', 'arrow']，左none右arrow；箭头大小用symbolSize，位置微调用symbolOffset。写错单词就完全没效果。 splitLine是分割线、axisTick是刻度、axisLine是轴线，三个别混；splitLine.lineStyle.color支持数组，可以一条一条配色。min/max用来看刻度范围（0 到 100 这种），不写就按数据自动算。- 一句话记住：凡是肉眼可见的，颜色、大小、位置都能调；但不用背 API，要记住“有这个功能”，用的时候去官网配置项里查。
示例 3：柱状图系列（多系列 + label + itemStyle 回调 + grid 布局）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03 echarts 柱状图</title>
<style>
* { margin: 0; padding: 0; }
#app { width: 800px; height: 500px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('app'));
var option = {
title: {
text: '柱状图',
left: 'center'
},
/* 布局组件：控制图形与容器的距离 */
grid: {
show: true,
backgroundColor: '#eee', // 需配合 show: true 才生效
left: 20,
right: 0,
top: 60,
bottom: 25
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: {
type: 'value'
},
/* 系列是数组：放几个对象就画几个图形 */
series: [
{
type: 'bar',
data: [10, 20, 30, 40, 50],
barWidth: 30, // 柱条宽度
showBackground: true, // 显示柱条背景
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.3)'
},
label: { // 图形上的文本标签
show: true, // 把数值显示出来
position: 'top', // 默认在里侧，可 inside/top/bottom...
rotate: 15, // 旋转角度
color: 'pink',
fontSize: 14
},
itemStyle: { // 图形样式
color: function (params) { // 回调：每个柱子单独配色
var arr = ['gold', '#f00', 'orange', 'green', 'blue'];
return arr[params.dataIndex];
},
borderWidth: 2,
borderColor: 'pink',
borderType: 'dashed'
}
},
{
type: 'bar',
data: [5, 15, 25, 35, 45]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>要点与易错点：
series写对象只能画一个图形，写数组才能在一个容器里放多个图形（放 2 个、3 个、100 个都行）。itemStyle.color写成函数时，参数里能拿到params.dataIndex，用它去取数组下标，就能让每根柱子颜色不同；只写字符串则所有柱子一个颜色。label.position默认在柱子里侧，写'top'才跑到柱顶；文字被裁掉一般是位置 + 容器尺寸的问题。backgroundStyle必须配合showBackground: true才显示，这是最常见的“写了没效果”。grid.backgroundColor也必须配合grid.show: true才生效；left/right/top/bottom用来让图表和容器贴合，但不要轻易归零，归零会把轴线、刻度压掉。barWidth控制柱条宽度，觉得柱子太粗就调它，不是去改itemStyle。- 一句话：echarts 学的其实主要就是布局 + 外观，配置项本身不难，难的是调到好看。
常见错误
- 现象：页面空白、控制台无明显报错 → 原因：容器没有显式高度，ECharts 无法计算画布 → 修法：给容器设置明确宽高（如
600×400），并确认初始化时 DOM 已渲染。 - 现象：
init报错或图表不显示 → 原因：传入的是 CSS 选择器字符串，或没拿到真实 DOM 节点 → 修法：先用getElementById/querySelector取得节点，再传给init。 - 现象：只写
xAxis或只写yAxis时报错 → 原因：直角坐标系轴组件配置不完整 → 修法：同时配置xAxis和yAxis；不需要的轴用show:false隐藏，而不是直接删掉。 - 现象：柱状图/折线图点位分布不均、0 值位置偏移 → 原因：类目轴缺少
type:'category'，或折线图未处理 X 轴两侧留白 → 修法：类目轴显式设type:'category'；折线图按需设置boundaryGap:false。 - 现象：一个容器想叠加多个图却只显示一个 → 原因：
series写成了对象，而不是数组 → 修法：series用数组，多个图形放多个系列对象。 - 现象：饼图标签或引导线看不见 → 原因：容器/半径过小，标签超出画布 → 修法：调大容器、调小
radius，或调整center/labelLine。 - 现象：调整
grid后轴线、刻度被裁掉 → 原因：上下左右留白设为 0 或过小 → 修法：先给轴线与标签留空间，再逐步贴边微调。
练习
- 引入 ECharts 后初始化一个
600×400容器，完成“标题 + X/Y 轴 + 单系列柱状图”，要求类目在 X 轴均匀分布。 - 在同一容器中叠加柱状图和折线图两个系列，数据自拟；检查
series数组结构是否正确。 - 做一个
400×400容器的饼图，要求标签在外部并显示引导线；若标签溢出，调整radius/center解决。 - 用
grid让图表尽量贴近容器边缘，同时保证 Y 轴轴线和刻度仍可见；记录调整前后差异。 - 从官网示例中挑一个不熟悉的配置项（如
labelLine、itemStyle回调、boundaryGap），改造成小案例并写出排错记录。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | echarts基本的使用 | 30:59 |
| 2 | echarts标题与xy轴的组件讲解 | 31:44 |
| 3 | echarts柱状图的使用 | 22:55 |
| 4 | echarts实现折线图 | 26:18 |
| 5 | echarts实现饼图 | 25:47 |
小结
- 排错顺序优先看：容器尺寸 → DOM 节点 → 控制台报错 → 配置项结构。
- 配置对象按“组件”组织，先保证结构完整，再做颜色、位置、大小等视觉微调。
series决定最终图形；多图叠加用数组，单系列对象只适合单图场景。- 类目轴、布局留白和容器尺寸是“看起来不对”的高频来源，应优先处理。
- 官网示例和配置项文档是主要工作流；记住“能不能调”比死背 API 更重要。
- 先布局后样式：
grid、radius、center先定空间，再调标签、轴线、颜色。 - 交付前重点检查标签溢出、轴线裁切和多系列可读性。