ECharts 可通过 CDN、npm 或本地文件三种方式引入 HTML5 页面，并需配置 DOM 容器、初始化实例及设置 option 对象完成图表渲染。
如果您希望在 HTML5 页面中展示交互式数据可视化图表，ECharts 是一个功能强大且轻量的 JavaScript 图表库。以下是将 ECharts 集成到 HTML5 页面中的多种引用方式与基础配置操作：
一、通过 CDN 引入 ECharts 库
使用公共 CDN 可快速加载 ECharts，无需本地下载和部署，适合开发测试与轻量级项目。该方式依赖网络稳定性，但能自动获取最新稳定版本。
1、在 HTML 文件的
或底部添加 script 标签，引用官方 CDN 地址。
2、确保 script 标签位于初始化图表的 JavaScript 代码之前。
立即学习 “ 前端免费学习笔记（深入）”；
3、推荐使用国内 CDN 加速地址：https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js。
二、通过 npm 安装并模块化引入
适用于使用 Webpack、Vite 等现代构建 工具 的 HTML5 项目，支持按需引入与 Tree Shaking，减少最终打包体积。
1、在项目根目录执行命令：npm install echarts –save。
2、在 JavaScript 文件中使用 ES6 import 语法：import * as echarts from ‘echarts’;。
3、若仅需特定图表类型（如折线图、柱状图），可导入组件以优化体积：import {init} from ‘echarts/core’;。
三、下载源码后本地引入
适用于内网环境、安全策略严格或需定制 ECharts 源码的场景。引入本地文件可完全脱离外部网络依赖。
1、访问 ECharts 官网 GitHub 发布页，下载对应版本的 dist 目录压缩包。
2、解压后将 echarts.min.js 文件放入项目静态资源目录（如 js/lib/）。
3、在 HTML 中通过相对路径引入：。
四、基础图表容器与初始化配置
ECharts 必须渲染在具有明确宽高的 DOM 容器中，且初始化前需确保 DOM 已就绪。该步骤是所有引用方式后续必执行的操作。
1、在 HTML 中定义一个具有唯一 id 的 div 容器：
。
2、使用 document.getElementById 获取该 DOM 元素。
3、调用 echarts.init 方法初始化实例：const chart = echarts.init(document.getElementById(‘chart-container’));。
五、设置图表选项并渲染
图表外观与数据由 option 对象控制，调用 setOption 方法将配置应用至实例。此步骤决定图表类型、坐标轴、图例、数据系列等核心表现。
1、构造标准 option 对象，至少包含 title、tooltip、xAxis、yAxis 和 series 字段。
2、series 中 type 字段指定图表类型，例如：‘bar’、‘line’、‘pie’。
3、调用 chart.setOption(option)触发渲染，确保该语句在 echarts.init 之后执行。
以上就是
