echarts其他组件与echarts使用事件（Day10 2/2）

本页对应 day10，共 5 段视频，约 1 小时 48 分。

学习目标

• 能够使用 ECharts 的 legend、tooltip、dataZoom、toolbox 等组件完成配置，并通过页面交互验证图例切换、提示框样式、区域缩放和工具栏功能是否生效。
• 能够为 ECharts 图表绑定 click 等事件，读取事件参数中的系列名称和数据值，并通过再次调用 setOption 动态更新标题或数据；能够调用 resize 并监听窗口变化实现图表自适应。
• 能够说明 Vite 的作用，使用 npm 或 pnpm 创建 Vue3 项目、安装依赖并启动开发服务器，能在 Vite 配置文件中定位并说明代理配置位置。
• 能够安装并引入 echarts-liquidfill 水球图插件，配置 liquidFill 系列的数据、颜色、透明度、高亮状态和形状，并验证水球图正常渲染。
• 能够获取并引入中国地图 GeoJSON 数据，使用 registerMap 注册地图，配置 geo 组件、区域标签、区域样式、提示框和缩放漫游；能够配置 lines 航线系列，设置起点终点经纬度、线样式、端点标记和动画特效。

知识点

图例组件 legend：控制多系列显隐

为什么需要：一个图表里可能同时有柱状图、折线图、散点图等多个系列，用户希望按需查看某一类数据，图例就是用来控制“谁显示、谁隐藏”的。

怎么想：图例展示的是系列标记，所以每个 series 必须有 name；没有 name，图例通常不会出现。点击图例项即可切换对应系列。

怎么做：

option = {
  legend: {},
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: {},
  series: [
    { name: '柱状', type: 'bar', data: [10, 20, 30] },
    { name: '折线', type: 'line', data: [33, 77, 22] },
    { name: '散点', type: 'scatter', data: [10, 33, 20] }
  ]
}

图例位置、方向、间距、颜色等可通过 legend 配置调整，例如 left、right、top、bottom、orient: 'vertical'、itemGap 等。

易错点：系列忘记写 name，图例不显示；图例位置和容器宽高冲突时会被遮挡。

提示框组件 tooltip：查看数据细节

为什么需要：图表只能看趋势，具体数值需要悬停查看，提示框负责展示当前数据项信息。

怎么想：tooltip 与 legend、xAxis、yAxis 平级，右侧是配置对象。文字样式在 textStyle，背景色可直接配 backgroundColor。

怎么做：

tooltip: {
  textStyle: { color: 'red' },
  backgroundColor: 'rgba(0,0,0,0.3)'
}

易错点：提示框本质是 div 浮层，页面里写 div { width: 100vw } 这类全局样式可能影响它，最好限定作用域；背景色支持十六进制、英文色和 rgba 等。

区域缩放与工具栏 dataZoom / toolbox

为什么需要：数据多时只观察某一段，用 dataZoom 选择范围；工具栏提供下载图片、数据视图、区域缩放、折线/柱状切换等内置能力。

怎么想：这两个都是组件，配置项与系列平级。toolbox 内置功能不需要自己画图标，按文档配置 feature 即可；工具位置可调。

怎么做：

dataZoom: [{ type: 'slider' }],
toolbox: {
  feature: {
    saveAsImage: {},
    dataView: {},
    magicType: { type: ['line', 'bar'] },
    restore: {}
  }
}

易错点：toolbox 的功能顺序由 feature 配置决定；不要自己臆造图标名，按文档抄写并逐步调整。

双坐标、自适应与点击事件

为什么需要：两个指标量纲差异大时，需要两个 Y 轴；容器尺寸变化时图表要跟着变；点击图形时可能需要联动标题或弹窗。

怎么想：双坐标的核心是 yAxis 写成数组，并让系列通过 yAxisIndex 指定使用哪根轴。自适应要监听 window.resize 后调用实例的 resize()。事件用实例 on('click', fn)。

怎么做：

const chart = echarts.init(document.querySelector('#box'))
chart.setOption({
  yAxis: [{ show: true }, { show: true }],
  series: [
    { name: '柱状', type: 'bar', data: [10, 20], yAxisIndex: 0 },
    { name: '折线', type: 'line', data: [60, 90], yAxisIndex: 1 }
  ]
})
window.addEventListener('resize', () => chart.resize())
chart.on('click', p => {
  chart.setOption({ title: { text: '数据为：' + p.value } })
})

易错点：双坐标通常指两个 Y 轴，两个 X 轴不常用；Y 轴轴线默认可能不显示，需要 show: true；resize 不监听窗口就不会自动适配。

Vite 与 Vue 中使用 ECharts

为什么需要：真实项目多在 Vue/React 工程中使用 ECharts，需要按模块方式安装和初始化。

怎么想：Vite 是创建项目的命令行工具，可创建 Vue 或 React 项目；Vue3 中初始化图表必须等 DOM 挂载完成。

怎么做：

import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const box = ref(null)
let chart
onMounted(() => {
  chart = echarts.init(box.value)
  chart.setOption({ xAxis: { type: 'category', data: ['A', 'B'] }, yAxis: {}, series: [{ type: 'bar', data: [10, 20] }] })
})

易错点：setup 执行时组件还没挂载，直接 echarts.init 拿不到 DOM；应在 onMounted 中初始化。Vite 项目创建时注意 Node 版本要求，依赖安装后再运行。

扩展水球图与中国地图

为什么需要：官方系列不包含水球图、地图航线等效果，需要扩展插件或注册地图数据。

怎么想：水球图安装 echarts-liquidfill 后引入，系列类型按文档写 liquidFill，数据是 0 到 1 之间的小数；地图先拿到中国地图 JSON，用 echarts.registerMap('china', json) 注册，再配 geo；航线用 lines 系列，数据里放起点终点经纬度，effect 配动画。

怎么做：

import 'echarts-liquidfill'
series: [{ type: 'liquidFill', data: [0.6, 0.4] }]

echarts.registerMap('china', chinaJson)
option = {
  geo: { map: 'china' },
  series: [{
    type: 'lines',
    data: [{ coords: [[116.4, 39.9], [87.6, 43.8]] }],
    effect: { show: true, symbol: 'arrow' }
  }]
}

易错点：水球图系列名、symbol、effect 等单词不要自己拼，按文档抄；数据不是 0 到 1 会显示异常；地图 JSON 要注册后再用；调试时依次检查安装、引入、series.type 拼写和版本兼容性。

先分清配置项、实例方法和事件

ECharts 学到后面不能只会写 option。因为真实页面里，图表既要显示数据，还要响应点击、跟随容器变化，甚至根据用户操作二次更新。转写稿里反复强调：配置项、实例方法、事件要分开看。option 负责“长什么样”，echarts.init 得到的是图表实例，chart.on 负责“用户操作后干什么”，chart.setOption 负责“重新改图表”。

基本顺序是：先有容器，再初始化实例，再 setOption，最后绑定事件或监听尺寸。容器必须有宽高，否则图表看不见。转写稿中在 Vue 里调试时，setup 执行早于 DOM 挂载，所以不能在顶层直接拿 ref 初始化，要放到 onMounted 里。这是易错点。

双 Y 轴：事件案例里常见的数据背景

为什么需要双 Y 轴？当两组数据量纲差很多时，比如一组是几十，另一组是几百，共用一根 Y 轴会导致小数据被压扁。怎么想？转写稿说得很直白：一般还是一个 X 轴，但放两个 yAxis 对象；每个 series 用 yAxisIndex 指定用哪根 Y 轴。不要误以为双 X 轴也常用，转写稿明确说大多数是双 Y 轴。

const chart = echarts.init(document.getElementById('main'));

const option = {
  title: { text: '双坐标' },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: [
    { type: 'value', axisLine: { show: true } },
    { type: 'value', axisLine: { show: true } }
  ],
  series: [
    {
      name: '柱状一',
      type: 'bar',
      yAxisIndex: 0,
      data: [10, 20, 30, 40, 50]
    },
    {
      name: '柱状二',
      type: 'bar',
      yAxisIndex: 1,
      data: [60, 70, 80, 90, 100]
    }
  ]
};

chart.setOption(option);

易错点：yAxisIndex 从 0 开始；两个 Y 轴默认可能不显示轴线，需要 axisLine.show: true；yAxis 写成数组才代表多根轴。调试时先刷新看两根轴是否出现，再检查 series 是否分别指定了索引。

给图表绑定点击事件

为什么需要事件？因为产品经常要求“点击某个柱子/饼图扇区，拿到数据并做联动”。怎么想？事件绑在 ECharts 实例上，不是绑在普通 DOM 上。写法是 chart.on('click', 回调)，回调参数 params 里能拿到当前图形对应的数据。转写稿中演示了点击后把标题改成被点击的数据值。

chart.on('click', function (params) {
  console.log(params);
  chart.setOption({
    title: {
      text: '数据为：' + params.value
    }
  });
});

易错点：先 console.log(params) 看结构，不要凭感觉取字段；饼图、柱状图、折线图都可以绑定点击；如果 params.value 是数组，直接拼接可能不好看，要先判断；重复执行绑定代码会重复触发，实际项目里要保证只绑一次。setOption 可以多次调用，用来更新标题等配置。

让图表跟随容器自适应：resize

为什么需要 resize？转写稿里把容器宽度改成百分比后，窗口变化时图表不会自动跟着变。怎么想？监听浏览器窗口变化，再调用实例的 chart.resize()。怎么做？

window.addEventListener('resize', function () {
  chart.resize();
});

易错点：resize 是实例方法，不是配置项；必须在 echarts.init 之后调用；容器本身要有宽高；Vue 项目中要在 onMounted 后初始化，并在卸载时移除监听，避免残留。转写稿中就是先监听 window.onresize，再在回调里执行 chart.resize()，让图表跟容器一起变化。

在 Vue 中落地时的关键顺序

为什么单独说 Vue？因为转写稿调试时发现，setup 里直接拿 DOM 拿不到。怎么做：用 ref 拿容器，在 onMounted 里初始化。引入方式按转写稿整理为全部引入：

import * as echarts from 'echarts';

易错点：不要写成默认导入；容器没有高度时图表不显示；事件和 resize 都应在实例创建后绑定。调试顺序建议是：先看容器有没有高宽，再看 echarts.init 是否拿到节点，再看 setOption 是否执行，最后看事件回调是否触发。这样比一上来怀疑 ECharts 本身更有效。

先厘清：vite 是什么、为什么要学

为什么需要：以前创建 Vue 项目常用 vue-cli，转写稿里把它称为“命令行工具”。CLI 是 Command Line Interface，也就是命令行接口。vue-cli 能创建 Vue 项目，但工具链相对老；vite 的定位是“快”的下一代前端开发与构建工具，既能创建 Vue 项目，也能创建 React 项目。

怎么想：不要把 vite 只当成“另一个 vue-cli”。它首先是一个工具：用命令创建项目，再用它提供的开发服务器把项目跑起来。转写稿里反复强调“它就是个工具”，所以学习重点应放在创建流程、依赖安装、启动命令和配置位置。

怎么做：先理解旧流程 vue create 项目名，再迁移到 create vite 的流程。vite 创建 Vue 项目时默认是 Vue3，不再像 vue-cli 那样询问 Vue2/Vue3。

易错点：不要把 CLI 当成某个具体框架；不要以为 vite 只能建 Vue 项目；不要以为创建完就能直接运行，后面还要安装依赖。

环境检查与创建项目

为什么需要：vite 对 Node 版本有要求。转写稿明确提醒：Node 版本不能低于 16。版本太低会导致创建或运行失败。

怎么想：创建项目前先确认环境，再选包管理器。npm、pnpm、yarn 都可以；pnpm 需要先全局安装。转写稿里还提到，创建时要选择框架，再选择 JavaScript 或 TypeScript。

怎么做：

node -v

# 任选一种包管理器；pnpm 需先全局安装
npm i -g pnpm

# 创建项目
pnpm create vite vite-demo
# 或
npm create vite vite-demo

执行后按提示选择框架，例如选择 Vue；再选择 JavaScript 或 TypeScript。转写稿中说明：vite 创建 Vue 项目默认就是 Vue3。

cd vite-demo
pnpm install
pnpm run dev

易错点：Node 低于 16 不要硬上；创建后如果没装依赖就直接 run dev，会缺依赖；不要以为创建时还会问 Vue2/Vue3，转写稿明确说它默认 Vue3。

依赖安装、启动与“秒开”

为什么需要：vite 创建出来的项目初始没有依赖，需要先安装。转写稿里现场看到依赖为空，随后执行安装，依赖才出现。

怎么想：创建完先看项目里的 package.json，确认 dev 脚本，再安装、启动。转写稿中运行的是 npm run dev 这一类命令，并提到启动速度比以前 vue-cli 快很多，形成“秒开”的体验。

怎么做：

pnpm install
pnpm run dev

如果使用 npm，则对应：

npm install
npm run dev

易错点：不要凭记忆猜启动命令，先看 package.json 的 scripts；不要跳过安装依赖；不要拿旧项目的启动习惯直接套新项目。

项目结构与配置位置的变化

为什么需要：vite 项目的根组件仍是 App.vue，整体写法和以前 Vue 项目接近；但配置文件变了。转写稿特别提醒：以前配置代理常找 vue.config.js，vite 项目要找他自己的配置文件。

怎么想：先认根组件，再认配置文件。转写稿中说，vite 项目里应看 vite.config.ts，代理相关配置在 server.proxy 里。

怎么做：项目结构上，App.vue 仍可作为根组件使用；配置代理时打开 vite.config.ts，在 server.proxy 中写规则。转写稿未给出完整代理目标，因此只保留结构示意：

// vite.config.ts（结构示意，导入部分按项目实际保留）
export default defineConfig({
  server: {
    proxy: {
      // 代理规则写在这里，不再写 vue.config.js
    }
  }
})

易错点：不要继续去改 vue.config.js；不要以为配置文件名字没变；代理规则要按接口文档填写，不能凭感觉编 target。

本节易错点汇总

为什么需要：vite 的坑主要集中在版本、依赖、默认框架和配置位置。

怎么想：按“查 Node 版本 → 创建项目 → 选 Vue → 装依赖 → 看 scripts 启动 → 配代理找 vite.config.ts”的顺序排查。

怎么做：把下面几条当作检查表：

node -v          # 不低于 16
pnpm install     # 创建后先装依赖
pnpm run dev     # 启动命令以 package.json 为准

易错点：Node 版本过低；创建后未安装依赖；误以为默认 Vue2；把代理写到旧配置文件；把 vite 当成只能建 Vue 的工具。转写稿中关于 ECharts 其他组件、事件、水球图和地图的内容，不属于“vite 基本使用”这一节的核心，本节先聚焦 vite 的创建、启动与配置。

课堂画面

代码示例

示例 1：ECharts 其他组件（图例 / 提示框 / 区域缩放 / 工具栏）+ 事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>ECharts 其他组件与事件</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    /* 容器必须有宽高，否则图表看不见 */
    #main {
      width: 800px;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="main"></div>

  <script>
    // 1. 初始化实例（一个实例对应一个容器）
    const myChart = echarts.init(document.getElementById('main'));

    const option = {
      title: {
        text: '其他组件'
      },

      // 提示框组件：鼠标悬停时的浮层
      // 注意：它是用 DIV 渲染的，自己写样式时最好加作用域，避免全局 div 样式影响它
      tooltip: {
        textStyle: { color: 'red' },
        backgroundColor: 'rgba(0,0,0,0.3)'
      },

      // 图例组件：控制哪个系列显示 / 隐藏
      // 坑：series 里不写 name，图例就渲染不出来
      legend: {
        right: 0,
        top: 0,
        itemGap: 20,
        orient: 'vertical'
      },

      // 区域缩放组件
      dataZoom: [
        { type: 'slider' }
      ],

      // 工具栏组件
      toolbox: {
        show: true,
        left: 'left',
        feature: {
          dataZoom: { yAxisIndex: 'none' },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },

      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
      },
      yAxis: {
        type: 'value'
      },

      series: [
        { name: '柱状', type: 'bar', data: [10, 20, 30, 40, 50, 60] },
        { name: '折线', type: 'line', data: [33, 77, 22, 13, 66, 93] },
        { name: '散点', type: 'scatter', data: [10, 33, 50, 20, 40, 80] }
      ]
    };

    myChart.setOption(option);

    // 2. 绑定事件：点击任意图形，把数据值写进标题
    myChart.on('click', function (params) {
      myChart.setOption({
        title: { text: '数据为：' + params.value }
      });
    });

    // 3. 自适应：窗口变化时重绘，图表跟着容器一起变
    window.onresize = function () {
      myChart.resize();
    };
  </script>
</body>
</html>

关键行与易错点：

• legend 能出现的前提是每个 series 都有 name，否则图例区是空的（转写稿里第一次运行"有吗？没有"就是这个原因）。
• tooltip 的浮层本质是 div，全局写 div { width: 100vw } 之类会把提示框撑坏，样式要加作用域。
• toolbox.feature 里的 dataZoom / dataView / magicType / restore / saveAsImage 是内置功能，直接照抄即可，left 可调工具栏位置。
• dataZoom 默认只作用于 x 轴，要同时缩放 y 轴需把 yAxisIndex 改成 'none' 之外的值（工具栏里 dataZoom: { yAxisIndex: 'none' } 表示不缩 y）。
• 点击事件 myChart.on('click', fn) 中 params.value 才是数据值；setOption 可以反复调用，用于局部更新标题。
• window.onresize = () => myChart.resize() 是图表自适应的关键，容器用百分比 / 100vw 时没它图表不会跟着变。

---

示例 2：双 Y 轴（双坐标）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>ECharts 双坐标</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    #main {
      width: 800px;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="main"></div>

  <script>
    const myChart = echarts.init(document.getElementById('main'));

    const option = {
      title: { text: '双坐标' },
      tooltip: {},
      legend: { right: 0, top: 0 },

      // 双坐标：两个 Y 轴，所以 yAxis 写成数组
      // 注意：一个 X 轴 + 两个 Y 轴才叫双坐标，不要写成两个 X 轴
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
      },
      yAxis: [
        {
          type: 'value',
          axisLine: { show: true }, // 默认轴线不显示，需要手动打开
          axisTick: { show: true }
        },
        {
          type: 'value',
          axisLine: { show: true },
          axisTick: { show: true }
        }
      ],

      series: [
        {
          name: '柱状',
          type: 'bar',
          yAxisIndex: 0, // 使用第一个 Y 轴（索引从 0 开始）
          data: [10, 20, 30, 40, 50, 60]
        },
        {
          name: '折线',
          type: 'line',
          yAxisIndex: 1, // 使用第二个 Y 轴
          data: [100, 200, 300, 400, 500, 600]
        }
      ]
    };

    myChart.setOption(option);

    window.onresize = function () {
      myChart.resize();
    };
  </script>
</body>
</html>

关键行与易错点：

• yAxis 写成数组，一个对象就是一个 Y 轴，两个对象就是双 Y 轴。
• 每个 series 必须用 yAxisIndex 指明用哪个轴（0 左、1 右），不写的话全部挤到第一个轴上，"双坐标"就白配了。
• 默认 Y 轴只有刻度、没有轴线，axisLine: { show: true } / axisTick: { show: true } 才能把轴线和刻度显示出来。
• 双坐标通常是"两个 Y 轴"，几乎不会出现两个 X 轴；写两个 X 轴是常见误解。

---

示例 3：Vite + Vue3 项目中使用 ECharts

创建项目（Node 版本不低于 16）：

npm create vite@latest my-echarts -- --template vue
cd my-echarts
npm i
npm i echarts
npm run dev

App.vue：

<template>
  <!-- 容器必须有高度 -->
  <div ref="chartRef" class="chart"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 全部引入，注意写法：import * as echarts from 'echarts'
import * as echarts from 'echarts'

const chartRef = ref(null)
let myChart = null

// 坑：写在 setup 顶层拿不到 DOM（setup 比组件渲染更早执行），
// 必须放到 onMounted 里，组件挂载完成后再初始化
onMounted(() => {
  myChart = echarts.init(chartRef.value)

  myChart.setOption({
    title: { text: '柱状图' },
    tooltip: {},
    legend: { data: ['销量'] },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月']
    },
    yAxis: { type: 'value' },
    series: [
      { name: '销量', type: 'bar', data: [10, 20, 30, 40, 50, 60] }
    ]
  })

  // 自适应：容器变化时图表跟着变
  window.onresize = () => {
    myChart.resize()
  }
})
</script>

<style>
.chart {
  width: 600px;
  height: 400px;
  border: 1px solid #000;
}
</style>

关键行与易错点：

• import * as echarts from 'echarts' 是 ECharts 5 的正确引入方式，import echarts from 'echarts' 会报错。
• 容器用 ref="chartRef"，echarts.init(chartRef.value) 传的是 DOM 节点；直接 echarts.init(document.getElementById(...)) 也能用，但 Vue 里更推荐 ref。
• 初始化必须写在 onMounted 里——setup 执行时 DOM 还没生成，chartRef.value 是 null，会直接报错。
• 容器 CSS 必须给宽高，没高度图表不显示。
• Vite 项目里配置代理、跨域，找的是 vite.config.js（TS 项目是 vite.config.ts）里的 server.proxy，不是老 Vue CLI 的 vue.config.js。
• 项目里用到的水球图、地图属于 ECharts 扩展，需要单独 npm i echarts-liquidfill 之类再注册，不能只装 echarts。

常见错误

1. 图例组件不显示 → 系列未设置 name，图例无法生成对应标记 → 给每个参与图例的 series 补上唯一、可读的 name。
2. 页面其他区域样式影响提示框 → 提示框浮层本质是 DOM 节点，容易被全局 div、宽高等样式污染 → 样式限定在图表容器内，避免对全局 div 写宽高和颜色。
3. 双 Y 轴图表系列全挤在一侧，或轴线刻度看不见 → 系列未指定 yAxisIndex，且轴线和刻度未开启 → 按数据含义给系列分配 yAxisIndex，并显式开启轴线、刻度等相关配置。
4. 浏览器窗口变化后图表不变形 → 只初始化了图表，没有监听窗口变化，或容器宽高写死 → 容器使用响应式尺寸，监听 window.resize 并调用实例的 resize()。
5. Vue 组件中初始化 ECharts 报容器为空 → 在 setup 阶段过早初始化，此时 DOM 尚未挂载 → 放到 onMounted 中初始化，并在卸载时销毁实例。
6. 水球图、地图等扩展图表报“未知系列”或不显示 → 未安装/未引入扩展包，地图未注册 GeoJSON，或 type 拼写、版本不匹配 → 按官方文档安装引入，地图先注册再使用，核对 type 与依赖版本。
7. 使用 Vite 创建项目失败 → 本机 Node 版本过低，不满足 Vite 要求 → 升级 Node 到文档要求的最低版本以上，再重新创建项目。
8. 地图 GeoJSON 引入后类型报错或路径异常 → 数据文件缺少类型声明，或资源路径/格式不符合当前工程配置 → 补充类型声明或按项目规范处理静态资源，确认 GeoJSON 结构与注册方法匹配。

练习

1. 在同一图表中配置柱状图、折线图、散点图三个系列，要求图例可切换显隐，图例位于右侧并垂直排列，调整图例项间距。
2. 配置一个双 Y 轴图表：柱状图使用左轴，折线图使用右轴；显示两侧轴线与刻度；点击柱状图时，把对应数值写入图表标题。
3. 在 Vue3 + Vite 项目中封装一个 ECharts 组件，要求容器宽高自适应，浏览器窗口变化时图表自适应，组件卸载时释放实例。
4. 安装并配置水球图扩展，要求数值在 0–1 之间、出现多条波浪线，并调整高亮透明度与波浪颜色。
5. 注册中国地图 GeoJSON，开启鼠标缩放和平移，显示区域标签与提示框，并添加一条从北京到新疆的航线，配置两端标记和航线动效。

原视频对照

#	视频	时长
1	echarts其他组件	17:26
2	echarts使用事件	16:48
3	vite工具的基本使用	14:55
4	拓展的水球图	29:47
5	拓展的地图	29:39

小结

1. ECharts 的常用组件应按配置项组合使用，图例、提示框、缩放、工具栏、双轴、事件等要围绕实际交互目标选择。
2. 图例是否正常显示，核心取决于系列命名和配置的一致性，不能只写组件而忽略系列信息。
3. 提示框是 DOM 浮层，工程中必须注意样式隔离，否则容易出现全局样式污染。
4. 双 Y 轴的关键不是多写一个轴对象，而是让系列通过索引明确绑定到对应轴。
5. 图表事件应绑定在实例上，点击后可通过重新设置配置项完成标题、数据等联动更新。
6. Vite 是创建和构建前端项目的工具，使用前要确认 Node 版本，代理等配置应查对应配置文件。
7. Vue 中集成 ECharts 要遵守“挂载后初始化、尺寸变化时自适应、卸载时销毁”的生命周期原则。
8. 水球图、字符云、地图、航线等属于扩展或进阶能力，不要求死记全部配置，但必须知道其存在、安装方式和查文档路径。