黑马就业数据平台（后端接口）（二）

本页对应 黑马就业数据平台（后端接口），共 7 段视频，约 55 分钟。

学习目标

• 能配置 tooltip.trigger 为 axis，实现鼠标移至坐标轴区域时触发提示框，并说明 item 与 axis 两种触发方式的差异。
• 能配置 yAxis.splitLine 的显示、线条样式与类型，将 Y 轴分割线设置为虚线并验证页面效果。
• 能按“查找相似示例—整合到项目—修改配置项”的流程，使用 echarts.init、配置项对象和 setOption 完成折线图渲染。
• 能抽取折线图渲染函数，在获取接口数据后调用该函数并传入薪资走势数据，完成数据到图表的映射。
• 能修改折线图的 title、grid、xAxis、yAxis 等配置，调整标题、网格间距、坐标轴线颜色与虚线样式。
• 能配置 series 中的 type、data、symbolSize、lineStyle.width，并使用 linear 渐变、起止坐标、offset 和透明色设置折线及区域渐变色。

知识点

需求与实现思路

本节要完成数据看板中的“薪资走势”折线图。为什么需要单独抽函数？因为看板里还有概览、柱状图、地图等图表，如果都写在 getData 里会越来越乱。怎么想？先把“获取数据”和“渲染图表”分开：getData 负责请求并解构数据，renderYearSalary(year) 只负责渲染折线图。怎么做？在 getData 中拿到 year 后调用渲染函数。易错点：不要把 echarts.init 写在请求前，也不要在没拿到 DOM 时初始化。

核心步骤是：先找相似示例，再整合到项目，最后逐项调整配置。转写稿中调试时先删掉示例里的 data，观察右侧是否消失，从而确认数据位置；又用 show:false 观察 splitLine 控制的是哪条线。这种“改一个属性看一个效果”的方式，比死记配置更可靠。

找示例并整合到项目

为什么先找示例？ECharts 配置项很多，直接手写容易漏。怎么想？到 ECharts 示例页找折线图，选择“平滑折线”和“带面积区域”两个示例结合：前者提供 smooth:true，后者提供 areaStyle。怎么做？把示例的 option 复制到函数中，再按三步整合：初始化实例、准备配置项、调用 setOption。

const dom = document.querySelector('#line')
const myChart = echarts.init(dom)
const option = { /* ... */ }
myChart.setOption(option)

易错点：DOM 选择器要写页面真实存在的 #line；setOption(option) 不要漏参数；示例数据只是占位，后面必须换成接口数据。

调整标题、网格与坐标轴

为什么先调 title 和 grid？因为标题太靠边、绘图区太靠上会直接影响可读性。怎么想？title.left/top 控制标题距容器左侧和顶部；grid.top 控制绘图区距顶部。怎么做？标题写“2022年薪资走势”，left:'12'、top:'15'，grid.top:'20%'。易错点：grid.top 写百分比要加字符串，写数字则是像素。

Y 轴要改分割线为虚线。为什么？默认实线太重，和设计稿不一致。怎么想？分割线是 yAxis.splitLine，不是 axisLine。怎么做：splitLine.lineStyle.type='dashed'。调试时可先写 show:false 确认它控制的是横向分割线。易错点：splitLine 管网格分割线，axisLine 管坐标轴轴线。

X 轴要改轴线为虚线并设置颜色。怎么做：xAxis.axisLine.lineStyle 中设置 type:'dashed'、color:'#ccc'，data 用 year.map(v => v.month)。易错点：改 axisLine.lineStyle.color 后，轴文字也可能一起变色；xAxis.type 应为 category。

提示框需要鼠标放在轴上也提示。为什么默认只在数据点提示？因为 tooltip.trigger 默认是 item。怎么做：设置 trigger:'axis'。易错点：不写 trigger 时，放在轴线上不会出现竖向提示。

配置系列与渐变色

为什么重点调 series？折线图的数据、点大小、线宽、面积填充都在这里。怎么做：data 用 year.map(v => v.salary)；symbolSize:10；lineStyle.width:8；smooth:true；areaStyle 做面积渐变；lineStyle.color 做线条渐变。

渐变色关键看方向：x0,y0 是起点，x2,y2 是终点，范围 0–1，相当于图形包围盒百分比；原点在左上角，x 从左往右，y 从上往下。线条从左到右渐变，用 x2:1,y2:0；面积从上到下渐变，用 x2:0,y2:1。

{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0, color: 'red'
  }, {
    offset: 1, color: 'blue'
  }],
  global: false
}

易错点：面积底部透明可用 rgba(255,255,255,0)；colorStops 的 offset 是 0 到 1；不要把所有渐变都写成同一方向。

关键代码与提交

// 渲染薪资走势
function renderYearSalary(year) {
  // 初始化ECharts实例
  const dom = document.querySelector('#line')
  const myChart = echarts.init(dom)

  // 定义选项和数据
  const option = {
    // 标题
    title: {
      text: '2022年薪资走势',
      // left,top分别设置，距离容器左侧和顶部的距离
      left: '12',
      top: '15'
    },
    // 绘图网络
    grid: {
      top: '20%'
    },
    // y轴
    yAxis: {
      // 坐标轴类型 value，连续数据
      type: 'value',
      // 调整分割线为虚线
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // x轴
    xAxis: {
      // 坐标轴类型，类目轴
      type: 'category',
      // 坐标轴轴线相关设置
      axisLine: {
        // 线段样式
        lineStyle: {
          // 线的类型
          type: 'dashed',
          // 线的颜色，修改之后，文字也会一起变色
          color: '#ccc'
        }
      },
      // 数据
      data: year.map(v => v.month)
    },
    // 系列图表
    series: [
      {
        // 数据
        data: year.map(v => v.salary),
        // 标记的大小
        symbolSize: 10,
        // 线的样式
        lineStyle: {
          // 线宽
          width: 8,
          // 颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#479dee'
            }, {
              offset: 1, color: '#5c75f0'
            }],
            global: false
          }
        },
        // 折线图
        type: 'line',
        // 平滑曲线
        smooth: true,
        // 区域填充样式
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#b2d7f7'
            }, {
              offset: 1, color: 'rgba(255,255,255,0)'
            }],
            global: false
          }
        }
      }
    ],
    // 提示框
    tooltip: {
      show: true,
      trigger: 'axis'
    }
  }

  myChart.setOption(option)
}

// 首页-统计数据
async function getData() {
  const res = await axios({
    url: '/dashboard',
  })
  const { overview, year, salaryData, groupData, provinceData } = res.data

  renderOverview(overview)
  renderYearSalary(year)
}

git add .
git commit -m"数据看板-薪资走势"

需求理解与找示例

为什么需要：薪资分布要看各薪资区间人数占比，饼图/环形图最直观；先找官方示例能减少从零写配置的成本。
怎么想：转写稿里反复强调“先找相似示例，再整合，再逐项调配置”。本节先到 ECharts 示例页找饼图/环形图，重点看 series.type: 'pie'、radius、label、labelLine 和 color。
怎么做：打开示例页，找相似环形图，复制能跑通的 option 到项目里，再按需求改。
易错点：不要一上来手写全部配置；先保证示例能渲染，再改数据。饼图不是“丙图”，series 不是“系列列表”随便堆，type 必须写 'pie'。

整合到项目：初始化、配置、渲染

为什么需要：示例只是静态数据，项目里要从接口拿 salaryData，并挂到 #salary 容器。
怎么想：按转写稿的三步：echarts.init(dom) 初始化实例 → 准备 option → myChart.setOption(option)。
怎么做：在 getData 里解构出 salaryData，调用 renderSalary(salaryData)；渲染函数里取 DOM、初始化、写配置、渲染。
易错点：DOM 选择器要写 #salary；setOption 不能漏；接口数据要先 console.log 确认结构，别把 salaryData 当成已算好的 value/name。

// 渲染薪资分布函数
function renderSalary(salaryData) {
  // console.log(salaryData)

  // 初始化实例
  const dom = document.querySelector('#salary')
  const myChart = echarts.init(dom)

  // 定义属性和数据
  const option = {
    title: {
      text: '班级薪资分布',
      left: 10,
      top: 15
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // top: '5%',
      // 离容器下侧的距离
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '班级薪资分布',
        // type=pie 饼图
        type: 'pie',
        // 数组的第一项是内半径，第二项是外半径
        radius: ['55%', '70%'],
        // 图形样式
        itemStyle: {
          // 半径
          borderRadius: 15,
          // 颜色
          borderColor: '#fff',
          // 粗细
          borderWidth: 2
        },
        // 高亮状态的扇区和标签样式
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 100,
        //     fontWeight: 'bold'
        //   }
        // },
        // 饼状图说明文本
        label: {
          show: false,
          // show: true,
          // position: 'center'
        },
        // 说明文本的指引线
        labelLine: {
          show: false
          // show: true
        },
        // 是否启用防止标签重叠策略，默认开启
        // avoidLabelOverlap: false,
        data: salaryData.map(v => {
          return {
            value: v.g_count + v.b_count,
            name: v.label
          }
        })
        //   [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
      }
    ],
    // 颜色
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
  }

  // 根据属性和数据绘制图表
  myChart.setOption(option)
}

// 首页-统计数据
async function getData() {

  // 使用拦截器的写法（只保留核心逻辑即可）
  const res = await axios({
    url: '/dashboard',
  })
  // const overview = res.data.overview
  // 通过解构语法，简化数据取值
  // console.log(res)
  const { overview, year, salaryData, groupData, provinceData } = res.data

  // 调用函数-渲染顶部数据
  renderOverview(overview)

  // 调用函数-渲染薪资走势
  renderYearSalary(year)
    
  // 调用函数-渲染薪资分布
  renderSalary(salaryData)

}

调整 title 与 legend

为什么需要：标题和解释文本影响可读性；图例放底部居中更符合看板布局。
怎么想：先改最明显的 title.text，再调 left/top 微调位置；legend 用 bottom、left 控制。
怎么做：title.text 写“班级薪资分布”，left: 10, top: 15；legend.bottom: '5%', left: 'center'。
易错点：数字和百分比字符串别混写；left: 10 可不加单位，'5%' 要加引号。

调整 series：环形、样式、标签与数据

为什么需要：默认饼图是实心且标签在外，看板里常用环形图，且标签隐藏避免拥挤。
怎么想：radius: ['55%', '70%'] 形成内外半径；itemStyle 做白色分隔和圆角；label、labelLine 先关掉；数据用 map 转成 {value,name}。
怎么做：value 用 v.g_count + v.b_count，name 用 v.label；tooltip.trigger: 'item' 让悬停扇区出提示。
易错点：data 必须是对象数组；g_count、b_count 字段名别写错；labelLine.show: false 时 label 也建议关；avoidLabelOverlap 默认开启，别误以为没效果。

调整 color 与调试提交

为什么需要：调色盘决定各扇区颜色顺序，统一色板更贴近设计稿。
怎么想：color 是数组，系列没单独设色时按数组循环取色。
怎么做：把设计色按顺序写进 color；保存后看浏览器，必要时看控制台确认 salaryData。
易错点：颜色顺序会影响扇区对应关系；改完记得 git add .、git commit -m"数据看板-薪资分布"。

git add .
git commit -m"数据看板-薪资分布"

课件图示

代码示例

示例一：薪资走势折线图（含渐变色）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>数据看板 - 薪资走势</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    #line { width: 640px; height: 400px; }
  </style>
</head>
<body>
  <div id="line"></div>

  <script>
    // 渲染薪资走势
    function renderYearSalary(year) {
      // 1. 初始化 ECharts 实例
      const dom = document.querySelector('#line')
      const myChart = echarts.init(dom)

      // 2. 准备配置项
      const option = {
        // 标题
        title: {
          text: '2022年薪资走势',
          // left、top 分别设置距离容器左侧和顶部的距离
          left: '12',
          top: '15'
        },
        // 绘图网格
        grid: {
          top: '20%'
        },
        // y 轴
        yAxis: {
          // 坐标轴类型 value，连续数据
          type: 'value',
          // 调整分割线为虚线
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        // x 轴
        xAxis: {
          // 坐标轴类型，类目轴
          type: 'category',
          // 坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              type: 'dashed',
              // 修改之后，文字也会一起变色
              color: '#ccc'
            }
          },
          data: year.map(v => v.month)
        },
        // 系列图表
        series: [
          {
            data: year.map(v => v.salary),
            // 标记（小圆点）的大小
            symbolSize: 10,
            // 折线图
            type: 'line',
            // 平滑曲线
            smooth: true,
            // 折线的样式
            lineStyle: {
              width: 8,
              // 从左到右的线性渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: '#479dee' }, // 0% 处的颜色
                  { offset: 1, color: '#5c75f0' }  // 100% 处的颜色
                ],
                global: false
              }
            },
            // 区域填充样式
            areaStyle: {
              // 从上到下的线性渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#b2d7f7' },
                  { offset: 1, color: 'rgba(255,255,255,0)' }
                ],
                global: false
              }
            }
          }
        ],
        // 提示框
        tooltip: {
          show: true,      // false 隐藏
          trigger: 'axis'  // 坐标轴触发
        }
      }

      // 3. 基于选项和数据绘制图表
      myChart.setOption(option)
    }

    // 模拟接口返回的 year 数据（真实项目中由 axios 请求 /dashboard 拿到）
    const year = [
      { month: '1月',  salary: 8200 },
      { month: '2月',  salary: 9320 },
      { month: '3月',  salary: 9010 },
      { month: '4月',  salary: 12000 },
      { month: '5月',  salary: 12900 },
      { month: '6月',  salary: 13300 },
      { month: '7月',  salary: 13200 },
      { month: '8月',  salary: 11800 },
      { month: '9月',  salary: 12600 },
      { month: '10月', salary: 14000 },
      { month: '11月', salary: 13800 },
      { month: '12月', salary: 15200 }
    ]

    renderYearSalary(year)
  </script>
</body>
</html>

要点说明

• echarts.init(dom) → const option = {...} → myChart.setOption(option)，是使用 ECharts 的三步固定流程，顺序不能乱。
• tooltip.trigger 默认是 'item'（只有放在图形上才提示），改成 'axis' 才会出现竖向轴触发提示。
• yAxis.splitLine.lineStyle.type = 'dashed' 控制的是 y 轴分割线；xAxis.axisLine.lineStyle 控制的是 x 轴轴线，两者容易混淆，别写反。
• 渐变对象的 x/y/x2/y2 是图形包围盒中的百分比（0–1），原点在左上角：x2: 1 表示从左到右，y2: 1 表示从上到下。折线用横向渐变，区域填充用纵向渐变。
• 区域渐变末端写 'rgba(255,255,255,0)' 而不是 'transparent'，避免个别浏览器下过渡发灰。
• data: year.map(v => v.month) 直接把接口数组映射成类目数据，不要再手写数组。

---

示例二：薪资分布环形饼图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>数据看板 - 薪资分布</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    #salary { width: 480px; height: 360px; }
  </style>
</head>
<body>
  <div id="salary"></div>

  <script>
    // 渲染薪资分布
    function renderSalary(salaryData) {
      // 初始化实例
      const dom = document.querySelector('#salary')
      const myChart = echarts.init(dom)

      // 定义属性和数据
      const option = {
        title: {
          text: '班级薪资分布',
          left: 10,
          top: 15
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 离容器下侧的距离
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: '班级薪资分布',
            // type=pie 饼图
            type: 'pie',
            // 数组的第一项是内半径，第二项是外半径
            radius: ['55%', '70%'],
            // 图形样式
            itemStyle: {
              borderRadius: 15,
              borderColor: '#fff',
              borderWidth: 2
            },
            // 饼状图说明文本
            label: {
              show: false
            },
            // 说明文本的指引线
            labelLine: {
              show: false
            },
            data: salaryData.map(v => {
              return {
                value: v.g_count + v.b_count,
                name: v.label
              }
            })
          }
        ],
        // 调色盘
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
      }

      myChart.setOption(option)
    }

    // 模拟接口返回的 salaryData（真实项目中来自 /dashboard 的 res.data）
    const salaryData = [
      { label: '10k 以下',   g_count: 12, b_count: 8  },
      { label: '10k-20k',    g_count: 26, b_count: 18 },
      { label: '20k-30k',    g_count: 15, b_count: 10 },
      { label: '30k 以上',   g_count: 6,  b_count: 4  }
    ]

    renderSalary(salaryData)
  </script>
</body>
</html>

要点说明

• 饼图的提示用 tooltip.trigger: 'item'（点扇区提示），与折线图的 'axis' 不同，不要照搬。
• radius: ['55%', '70%'] 数组第一项是内半径、第二项是外半径，写成数组才变环形图；写成单个值或字符串就是实心饼图。
• label.show 和 labelLine.show 都设为 false，图例就承担了说明作用；若想中间显示文字，需要把 label 的 position 设为 'center' 并开启 show。
• data 必须是 { value, name } 结构，value 由 g_count + b_count 计算得到，name 用 label，字段名写错会导致图例和扇区名称对不上。
• color 是配置项的顶层属性，与 series 同级，不要写进 series 里；数组长度不够时颜色会循环复用。
• itemStyle.borderColor: '#fff' 配合 borderWidth 才能做出扇区之间的白色缝隙，borderRadius 让扇区圆角化。

常见错误

1. 图表区域一片空白，控制台无报错

• 现象：echarts.init(dom) 执行成功，但页面上看不到任何图形，或只显示一瞬间。
• 原因：容器 #line 或 #salary 没有显式宽高（父级未撑开、在隐藏 tab 内初始化，或初始化时容器高度为 0），导致画布尺寸为 0；另外，echarts.init 时传入的 dom 为 null（id 写错，或脚本在 DOM 渲染前执行）。
• 修法：给容器写死 height: 300px（或用 flex 撑开），确认 id 与 querySelector 一致；在隐藏面板中渲染的图表，应在面板显示后再 init，并补一次 myChart.resize()。

2. 鼠标放到坐标轴上没有提示，只有悬停在数据点上才弹提示

• 现象：需求要求“轴线触发”，实际只有悬停在折线拐点处才出现 tooltip。
• 原因：tooltip.trigger 默认是 'item'（数据项触发），没有显式改成 'axis'。
• 修法：在 option.tooltip 中写 trigger: 'axis'，show 保持默认即可，不必额外写 show: true。

3. 区域渐变色方向反了：应上下渐变，却出现左右渐变，或整块纯色

• 现象：折线下方填充区域是横向渐变，或 areaStyle.color 写了渐变对象但完全不生效。
• 原因：x / y / x2 / y2 是包围盒百分比坐标，起点指向终点即为方向；写成 x2: 1 就是横向，上下渐变必须写 x: 0, y: 0, x2: 0, y2: 1。另外，把渐变对象错放进 lineStyle.color 与 areaStyle.color 互串。
• 修法：横向渐变用 x2: 1, y2: 0，纵向渐变用 x2: 0, y2: 1；改完刷新核对方向；同时确认 colorStops 的 offset 从 0 递增到 1。

4. 坐标轴数据全是 undefined，或折线只有 1 个点

• 现象：x 轴显示空白或 undefined，折线不出现。
• 原因：直接把接口返回的数组赋给 data（data: year），没有做字段映射；或字段名拼错（month/salary、g_count + b_count）。
• 修法：data: year.map(v => v.month)、data: year.map(v => v.salary)；饼图用 salaryData.map(v => ({ value: v.g_count + v.b_count, name: v.label }))。先在函数入口 console.log(year) 确认结构与字段名，再写映射。

5. 饼图文字、引导线挤在一起或遮挡环形

• 现象：扇区外侧堆满重叠的文字和线，图形显得很乱。
• 原因：没有关闭 label 和 labelLine，或 radius 写成单个字符串而非数组，环形没做出来。
• 修法：label: { show: false }、labelLine: { show: false }；radius: ['55%', '70%'] 用数组；需要扇区间隔时，用 itemStyle 的 borderRadius / borderColor / borderWidth。

6. 虚线样式不生效

• 现象：设置了 type: 'dash' 或把 splitLine 写在了错误位置，线条仍是实线。
• 原因：ECharts 的取值是 'dashed'（不是 'dash'）；splitLine 属于 yAxis，轴线样式属于 axisLine.lineStyle，两者层级不同，写错位置后不生效。
• 修法：Y 轴分割线用 yAxis.splitLine.lineStyle.type = 'dashed'；X 轴轴线用 xAxis.axisLine.lineStyle.type = 'dashed'；不确定层级时，在配置项手册里逐层点开查看。

7. 重复渲染时控制台提示 “There is a chart instance already initialized on the dom”

• 现象：切换筛选条件或重新请求数据后，旧图表不更新，还打印警告，页面卡顿。
• 原因：每次渲染都调用一次 echarts.init(dom)，同一个 dom 上挂了多个实例。
• 修法：实例只 init 一次并缓存；或复用 echarts.getInstanceByDom(dom)；后续只调用 setOption。确实要重建时，先 myChart.dispose()。

8. 饼图自定义 color 不生效

• 现象：color: ['#fda224', ...] 写了，扇区还是默认配色。
• 原因：把 color 写进了 series[0] 内部，它应是与 series 同级的顶层配置项。
• 修法：把 color 数组提到 option 顶层；若只想给某个系列单独配色，用 series[0].itemStyle.color 或 data 里逐项指定。

练习

练习 1｜轴线触发的自定义提示 把薪资走势的 tooltip 从数据项触发改为轴线触发，并用 formatter 输出“X 月：¥xxx”的文案（不要出现默认的圆点符号和系列名）。

练习 2｜给折线图加第二个系列 在同一张薪资走势图上追加“B 班平均薪资”系列（数据自造），要求：两条线颜色区分明显、开启 legend 且放在底部居中、两条线都保持平滑曲线，并验证 tooltip 同时显示两组数据。

练习 3｜渐变方向自测 把折线区域填充改为“从上到下由深蓝到透明”，把折线本身改为“从左到右由蓝到紫”；改完后故意把其中一个的 x2 / y2 互换，观察并说明视觉差异，再改回正确值。

练习 4｜饼图增强 在薪资分布环形图中心显示“班级薪资分布”文字（用 title 的 left/top 定位，或用 graphic），并让鼠标悬停时扇区轻微放大、显示百分比标签；同时保证默认状态下文字和引导线仍然隐藏。

练习 5｜健壮性改造 为 renderYearSalary 和 renderSalary 加两件事：①接口返回空数组时，在容器内显示“暂无数据”而不是空白图；②窗口尺寸变化时调用 resize()。说明你如何避免重复 init。

原视频对照

#	视频	时长
1	基础配置-提示框及y轴轴线样式	07:32
2	基础配置-数据列表及颜色图例组件	05:35
3	案例-折线图整合示例	12:47
4	案例-折线图修改配置项1	07:32
5	案例-折线图修改配置项2	06:40
6	案例-折线图区域颜色	11:16
7	案例-折线图颜色完成	04:15

小结

1. 看板多图表的通用骨架是“一个 getData 统一取数 + 每个图表一个 renderXxx(data) 函数”，新增图表就是加一个函数、加一次调用、加一个解构字段，不需要改动取数逻辑。
2. 画图三步固定不变：init 实例 → 准备 option → setOption；其中最容易出问题的是第一步的容器宽高和第三步的重复实例，而不是配置项本身。
3. 找示例的效率远高于从零写配置：先按图形类型（折线、饼图）定位相似示例，只提取关键片段（如 areaStyle 渐变），再粘进自己的 option 中改造，不要整段照搬示例数据。
4. 配置项不要背，记“层级 + 关键词”即可：tooltip.trigger、yAxis.splitLine.lineStyle.type、xAxis.axisLine.lineStyle、series[].areaStyle、顶层 color；忘记时逐层点开文档比猜测更快。
5. 数据到图表的转换永远是 map：x 轴取类目字段、系列取数值字段、饼图取 { value, name }，字段名以接口实际返回为准，先打印再映射。
6. 渐变色的方向完全由 x / y / x2 / y2 四个百分比坐标决定，改完必须对照视觉方向验证；线性与径向的差异也在 type 一个字段上。
7. 样式类需求（虚线、圆角、粗细、颜色）都要精确落到“哪一层对象的哪个属性”上，写错层级往往静默失效——这类问题优先用浏览器检查或逐项删改来定位。
8. UI 未给色值时，从已完成页面取色（或在源码里搜 colorStops）比自己猜颜色更可靠，也便于和设计稿保持一致。