尚硅谷前端 2023 · 教程站

主题

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

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

代码示例 ​

示例 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/echarts@5.4.3/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/echarts@5.4.3/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/echarts@5.4.3/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 学的其实主要就是布局 + 外观，配置项本身不难，难的是调到好看。

常见错误 ​

  1. 现象：页面空白、控制台无明显报错 → 原因：容器没有显式高度，ECharts 无法计算画布 → 修法：给容器设置明确宽高（如 600×400），并确认初始化时 DOM 已渲染。
  2. 现象：init 报错或图表不显示 → 原因：传入的是 CSS 选择器字符串，或没拿到真实 DOM 节点 → 修法：先用 getElementById / querySelector 取得节点，再传给 init。
  3. 现象：只写 xAxis 或只写 yAxis 时报错 → 原因：直角坐标系轴组件配置不完整 → 修法：同时配置 xAxis 和 yAxis；不需要的轴用 show:false 隐藏，而不是直接删掉。
  4. 现象：柱状图/折线图点位分布不均、0 值位置偏移 → 原因：类目轴缺少 type:'category'，或折线图未处理 X 轴两侧留白 → 修法：类目轴显式设 type:'category'；折线图按需设置 boundaryGap:false。
  5. 现象：一个容器想叠加多个图却只显示一个 → 原因：series 写成了对象，而不是数组 → 修法：series 用数组，多个图形放多个系列对象。
  6. 现象：饼图标签或引导线看不见 → 原因：容器/半径过小，标签超出画布 → 修法：调大容器、调小 radius，或调整 center / labelLine。
  7. 现象：调整 grid 后轴线、刻度被裁掉 → 原因：上下左右留白设为 0 或过小 → 修法：先给轴线与标签留空间，再逐步贴边微调。

练习 ​

  1. 引入 ECharts 后初始化一个 600×400 容器，完成“标题 + X/Y 轴 + 单系列柱状图”，要求类目在 X 轴均匀分布。
  2. 在同一容器中叠加柱状图和折线图两个系列，数据自拟；检查 series 数组结构是否正确。
  3. 做一个 400×400 容器的饼图，要求标签在外部并显示引导线；若标签溢出，调整 radius / center 解决。
  4. 用 grid 让图表尽量贴近容器边缘，同时保证 Y 轴轴线和刻度仍可见；记录调整前后差异。
  5. 从官网示例中挑一个不熟悉的配置项（如 labelLine、itemStyle 回调、boundaryGap），改造成小案例并写出排错记录。

原视频对照 ​

#视频时长
1echarts基本的使用30:59
2echarts标题与xy轴的组件讲解31:44
3echarts柱状图的使用22:55
4echarts实现折线图26:18
5echarts实现饼图25:47

小结 ​

  1. 排错顺序优先看：容器尺寸 → DOM 节点 → 控制台报错 → 配置项结构。
  2. 配置对象按“组件”组织，先保证结构完整，再做颜色、位置、大小等视觉微调。
  3. series 决定最终图形；多图叠加用数组，单系列对象只适合单图场景。
  4. 类目轴、布局留白和容器尺寸是“看起来不对”的高频来源，应优先处理。
  5. 官网示例和配置项文档是主要工作流；记住“能不能调”比死背 API 更重要。
  6. 先布局后样式：grid、radius、center 先定空间，再调标签、轴线、颜色。
  7. 交付前重点检查标签溢出、轴线裁切和多系列可读性。