ECharts 基础与折线图

1.1 什么是 ECharts？

ECharts 是百度开源的 JavaScript 数据可视化库，现在由 Apache 基金会维护。它可以帮你把数据变成各种图表：折线图、柱状图、饼图、地图、仪表盘、雷达图、散点图......几乎你能想到的图表它都支持。

1.2 安装 ECharts

在项目目录下执行：

bash 复制代码

cd E:/1_train/iot-screen
npm install echarts

安装完成后，package.json 的 dependencies 中会多出一行：

bash 复制代码

{
  "dependencies": {
    "vue": "^3.5.13",
    "echarts": "^5.x.x"    // ← 新增
  }
}

引入方式 --- 全量引入 vs 按需引入：

bash 复制代码

// 方式一：全量引入（简单，但打包体积大 ~800KB）
// ★ 教学和原型阶段用这个，简单省事
import * as echarts from 'echarts'

// 方式二：按需引入（只引入用到的组件，体积小很多）
// ★ 正式项目上线前改成这个
import * as echarts from 'echarts/core'
import { LineChart, BarChart, PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  LineChart, BarChart, PieChart,
  TitleComponent, TooltipComponent, LegendComponent, GridComponent,
  CanvasRenderer
])

1.3 ECharts 的核心概念

使用 ECharts 只需要理解三样东西：

bash 复制代码

1. 容器（Container） ------ 一个有宽高的 DOM 元素（div）
2. 实例（Instance）   ------ 通过 echarts.init(容器) 创建
3. 配置（Option）     ------ 一个 JS 对象，描述图表长什么样

bash 复制代码

准备一个 <div>（必须有宽高！）
       ↓
echarts.init(div) → 得到图表实例
       ↓
实例.setOption(配置对象) → 图表渲染出来
       ↓
数据变化时：再次调用 setOption(新配置) → 图表自动更新
       ↓
组件销毁时：实例.dispose() → 释放资源

1.4 在 Vue 3 中使用 ECharts 的标准模式

bash 复制代码

<template>
  <!--
    ★ 图表容器：
    1. 必须用 ref 绑定，方便 JS 中获取 DOM 元素
    2. 必须有明确的宽高（ECharts 需要知道画布大小）
  -->
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

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

// ==================== Step 1：获取 DOM 引用 ====================
// ref="chartRef" 绑定的 DOM 元素
const chartRef = ref(null)

// 图表实例（不用 ref 包裹，因为不需要响应式）
let chartInstance = null

// ==================== Step 2：定义配置项 ====================
const option = {
  // ... 图表配置（后面详细讲）
}

// ==================== Step 3：初始化图表 ====================
onMounted(() => {
  // 确保 DOM 已存在
  if (chartRef.value) {
    // 创建 ECharts 实例
    chartInstance = echarts.init(chartRef.value)
    // 设置配置项（图表就渲染出来了）
    chartInstance.setOption(option)
  }
})

// ==================== Step 4：清理资源 ====================
onUnmounted(() => {
  // ★ 必须 dispose！否则内存泄漏
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

骨架搭好了，现在我们要给图表注入灵魂。option 对象就是 ECharts 的'基因图谱'，它决定了图表长什么样。

那option怎么写呢?

最简单的方式, 就是直接到echarts的官网 链接: https://echarts.apache.org/找, 找到你想要的图表, 然后直接复制完后改成自己想要的

网站里面图表非常丰富, 但是要改成我们自己想要的, 还需要了解Options不是:

Options所有的配置都遵循一个层级树状结构：

bash 复制代码

option (根节点)
 ├── title (标题组件)
 ├── legend (图例组件)
 ├── grid (直角坐标系内绘图网格)
 │    ├── xAxis (x轴)
 │    └── yAxis (y轴)
 ├── series (系列列表，核心！)
 │    ├── type: 'line' (图表类型)
 │    ├── data: [...] (数据)
 │    └── itemStyle (图形样式)
 │         └── color: 'red'
 └── tooltip (提示框)

💡 核心规律：

组件独立：title、legend、tooltip 等都是平级的顶级属性。
Series 是数组：series 是一个数组 \[\]，因为一个图表可以同时画折线 + 柱状（混合图表）。
样式嵌套：具体的颜色、字体、边框通常藏在 itemStyle、label、lineStyle 等子对象里。

小白啊！！！写的不好轻喷啊🤯如果觉得写的不好，点个赞吧🤪（批评是我写作的动力）

...。。。。。。。。。。。...