ECharts可通过CDN、npm或本地文件三种方式引入HTML5页面，并需配置DOM容器、初始化实例及设置option对象完成图表渲染。
如果您希望在HTML5页面中展示交互式数据可视化图表，ECharts是一个功能强大且轻量的JavaScript图表库。以下是将ECharts集成到HTML5页面中的多种引用方式与基础配置操作：
使用公共CDN可快速加载ECharts，无需本地下载和部署，适合开发测试与轻量级项目。该方式依赖网络稳定性，但能自动获取最新稳定版本。
1、在HTML文件的
或底部添加script标签，引用官方CDN地址。2、确保script标签位于初始化图表的JavaScript代码之前。
立即学习“前端免费学习笔记（深入）”；
3、推荐使用国内CDN加速地址：https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js。
适用于使用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之后执行。
以上就是html5 如何引用echart_HTML5引用ECharts图表方法与配置技巧【教程】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
995
收藏
