2、ECharts基础回顾：库的引入方式、基本配置项结构与渲染器选择

在搭建实时监控大屏之前，必须牢固掌握 ECharts 的核心基础。本节将系统回顾 ECharts 的三种引入方式、标准配置项（option）的层级结构，以及 Canvas 与 SVG 渲染器的选型原则，为后续的数据刷新与 KPI 看板配置打下坚实的技术根基。

2.1 ECharts 库的引入方式

ECharts 支持三种主流引入方式，适用于不同的项目场景：

2.1.1 CDN 引入（推荐用于本课程）

本课程所有示例均采用 CDN 方式，便于快速上手。在 HTML 的 <head> 或 <body> 末尾添加以下 <script> 标签：

<!-- 引入 ECharts 核心库（推荐使用 5.x 最新稳定版） -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

2.1.2 npm 安装（工程化项目）

若你使用 Vue / React 等框架，推荐通过 npm 安装并配合按需引入：

# 安装 ECharts
npm install echarts --save

# 在组件中按需引入（以折线图为例）
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]);

2.1.3 离线下载

从 ECharts 官网下载完整构建包，或通过 echarts/dist 目录获取，直接使用 <script> 标签引入本地文件：

<script src="./lib/echarts.min.js"></script>

2.2 基本配置项（option）结构

ECharts 的所有图表均通过一个统一的 JavaScript 对象 option 进行配置。理解其层级结构是掌握 ECharts 的关键。以下是一个标准折线图的 option 结构：

// 1. 初始化实例
const myChart = echarts.init(document.getElementById('main'));

// 2. 定义配置项
const option = {
  // —— 全局属性 ——
  title: {
    text: '实时CPU使用率',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['CPU使用率']
  },

  // —— 坐标系 ——
  xAxis: {
    type: 'category',
    data: ['08:00', '08:05', '08:10', '08:15', '08:20']
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100
  },

  // —— 数据系列 ——
  series: [
    {
      name: 'CPU使用率',
      type: 'line',
      data: [45, 62, 58, 79, 85],
      smooth: true
    }
  ]
};

// 3. 渲染图表
myChart.setOption(option);

option 的核心层级可归纳为以下结构：

2.3 渲染器选择：Canvas vs SVG

ECharts 5 支持两种渲染器：Canvas（默认）和 SVG。选择正确的渲染器对监控大屏的性能与清晰度至关重要。

2.3.1 如何指定渲染器

在 echarts.init() 时通过第二个参数指定：

// 使用 Canvas 渲染器（默认，可省略）
const chart1 = echarts.init(document.getElementById('chart1'), null, { renderer: 'canvas' });

// 使用 SVG 渲染器
const chart2 = echarts.init(document.getElementById('chart2'), null, { renderer: 'svg' });

2.4 本节小结

• 引入方式： CDN 适合快速开发，npm 适合工程化项目，离线下载用于内网环境。
• option 结构： 全局组件 → 坐标系 → 数据系列（核心）→ 交互组件，层级清晰。
• 渲染器选择： Canvas 适合大数据量，SVG 适合小数据量与高清晰度场景。