Lecture18-ECharts 数据图表

管理员
2026-10-17
前端-框架工具
70
0
文章目录

    [toc]

    单词词性音标含义
    EChartsn./ˈiː tʃɑːts/开源图表库，给数据 + 配置就能画出图表
    initv./ɪˈnɪt/初始化，echarts.init(div) 创建图表实例
    setOptionv./set ˈɒpʃn/传入配置对象（坐标轴、数据、图表类型）
    seriesn./ˈsɪəriːz/系列，决定图表类型（bar / line / pie）与数据
    xAxisn./eks ˈæksɪs/x 轴配置（类目、数据）
    disposev./dɪˈspəʊz/销毁图表实例，离开页面时清理防内存泄漏
    pien./paɪ/饼图，用 name / value 列表展示占比

    Lecture18-ECharts 数据图表

    1、本节讲什么

    学会用 ECharts 画图表（柱状图、折线图、饼图），把后端数据变成直观的可视化。这是"数据看板"类页面的标配。

    2、概念速览

    什么是 ECharts：一个开源图表库，你给它数据 + 配置，它画出漂亮的图。前端项目做统计、报表几乎都用它。

    官网网址：Apache ECharts

    怎么用（核心三步）：

    1. 找一个 div 当"画布"；
    2. echarts.init(div) 创建图表实例；
    3. chart.setOption({...}) 传入配置（x 轴、y 轴、数据、图表类型）。

    正确 vs 误区：图表的难点不在"画"，而在"把后端数据转成图表要的格式"。配置你可以让 AI 生成，但"数据结构怎么喂给 ECharts"你要懂。

    3、先看效果

    npm install echarts

    <script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref } from 'vue'

const el = ref<HTMLDivElement>()
let chart: echarts.ECharts

onMounted(() => {
  // 生命周期钩子：组件挂载到页面后才执行。
  // 必须等页面 DOM 渲染完成，容器 <div ref="el"> 才存在，才能初始化图表。
  chart = echarts.init(el.value!)   // 用模板里的容器 div 初始化图表；
                                    // el.value! 里的 ! 是"非空断言"，告诉 TS"这里不会是 null"

  chart.setOption({                 // setOption：给图表设置"画什么"的配置项
    xAxis: { data: ['周一', '周二', '周三', '周四', '周五'] },  // 横轴：5 个分类（柱子的名字）
    yAxis: {},                       // 纵轴：留空，让 ECharts 根据数据自动算刻度范围
    series: [{                       // series：数据系列（图表要画的一组数据）
      type: 'bar',                   // 类型是柱状图（bar）
      data: [120, 200, 150, 80, 170] // 5 根柱子的高度，与 xAxis 的 5 个分类一一对应
    }],
  })
})

onUnmounted(() => chart?.dispose())   // 离开页面销毁，防止内存泄漏
</script>

<template>
  <div ref="el" style="width: 600px; height: 300px"></div>
</template>

    4、照着做

    1. 安装 echarts，替换 App.vue，看柱状图。
    2. 把 type: 'bar' 改成 'line'，看折线图——换一个类型就是另一种图。
    3. 看数据来源：把 data: [120, 200, ...] 换成后端返回的数组：
    const data = await http.get('/stats')          // 返回 { month: string, count: number }[]
chart.setOption({
  xAxis: { data: data.map(d => d.month) },
  series: [{ type: 'bar', data: data.map(d => d.count) }],
})

    体会"把接口数据 map 成 ECharts 要的格式"。

    5、常见疑问

    • Q：图表配置太长、看不懂怎么办？ A：正常，配置很琐碎。实战里让 AI 根据你的数据结构生成配置，你只需提供数据和一个 div（第 38 节会演示）。你要会的是"数据结构对不上就报错"这种排查。
    • Q：图不显示 / 空白怎么办？ A：① div 必须有宽高（style="width:...;height:..."）；② init 要在 div 已渲染后调用（放 onMounted）；③ 检查 setOption 的 data 是不是空数组。
    • Q：图表要响应数据变化吗？ A：数据变了就再调一次 chart.setOption(新数据)，ECharts 自动更新，不用手动重绘。
    • Q：echarts.init(el.value!) 里的 ! 是什么？ A：TypeScript 的"非空断言"，告诉 TS"这里不会是 null"。因为 el 在挂载后一定存在。
    • Q：饼图怎么画？ A：series: [{ type: 'pie', data: [{ name: 'A', value: 10 }, ...] }]。让 AI 按你的数据生成。

    6、规范要点

    • 图表的 div 必须给宽高，init 放 onMounted，离开页面 dispose() 清理。
    • 图表数据来自接口（第 35/37 节），别用写死的假数据验证。
    • 复杂配置让 AI 生成，你负责"数据结构"和"容器"。

    7、本节验证

    • 会用 echarts.init + setOption 画出柱状图 ✅
    • 切换 series 的 type 就能在 bar / line / pie 之间换图 ✅
    • 会把接口数据 map 成 ECharts 需要的格式 ✅
    • 知道图表 div 必须有宽高、init 放 onMounted、离开时 dispose ✅
    end