当前位置：首页 > 前端开发 > 正文

如何新建echarts.html

admin
前端开发
2025-09-08
3

e charts.html需先创建HTML文件，通过CDN或本地路径引入ECharts库，再添加一个具备指定ID的容器元素用于承载图表

是新建一个使用 ECharts 的 HTML 文件（即 echarts.html）的详细步骤指南,涵盖从基础结构到完整示例的全过程：

第一步：创建基本的HTML骨架

打开文本编辑器（如VS Code、Sublime Text等），新建一个空白文件并保存为 echarts.html，按照标准HTML5规范编写基础结构，注意声明文档类型为 <!DOCTYPE html>，确保浏览器以现代模式渲染页面,核心框架应包含以下三个部分：

<head>区域：用于设置元信息和引入外部资源；
<body>区域：承载可视化图表的容器及交互元素；
脚本逻辑块：通过JavaScript实现数据绑定与配置调用。

初始代码可写为：

如何新建echarts.html 第1张

第二步：引入ECharts库文件

有两种主流方式加载ECharts依赖项：

| 方式 | 实现方法 | 适用场景 |

|————|————————————————————————–|————————|

| CDN加速 | 在<head>末尾添加<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> | 快速原型开发 |

| 本地部署 | 下载官方压缩包后，将echarts.js放入项目目录并通过相对路径引用（如<script src="lib/echarts.js"></script>） | 生产环境稳定性要求高时 |

推荐初学者优先使用CDN方案，因其无需手动管理版本更新且配置简单，若涉及复杂功能扩展（如自定义组件）,则建议采用本地化安装策略。

第三步：定义图表容器

为ECharts实例提供一个具备明确尺寸约束的DOM节点至关重要，通常做法是在<body>内插入带ID标识的div元素，并为其设置CSS样式以确保正常显示,典型示例如下：

如何新建echarts.html 第2张

关键属性说明：

宽度/高度必须显式指定数值或百分比单位；

推荐添加边距(margin)避免与其他页面元素重叠；

ID命名遵循驼峰规则便于JavaScript选取。

第四步：初始化图表实例并配置参数

在<script>标签内完成以下核心操作：

1️⃣ 获取DOM引用：通过document.getElementById('mainVisualization')定位到目标容器；

2️⃣ 创建实例对象：调用全局函数echarts.init()传入上述DOM节点；

3️⃣ 构建选项对象：按照官方文档规范定义数据集、坐标轴、系列类型等视觉参数。

如何新建echarts.html 第3张

完整代码片段如下：

// 等待DOM加载完成后执行 window.onload = function() { // 基于特定容器初始化图表 const chartInstance = echarts.init(document.getElementById('mainVisualization')); // 定义详细的配置项 const chartConfig = { title: { text: '季度销售额趋势分析', left: 'center' }, // 居中显示标题 tooltip: { trigger: 'item', formatter: params => `${params.seriesName}<br/>金额：￥${params.value}` }, // 自定义提示框内容 xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] }, // X轴分类标签 yAxis: { type: 'value', name: '营收金额(万元)' }, // Y轴计量单位说明 series: [{ name: '实际业绩', type: 'bar', // 柱状图类型 itemStyle: { color: '#5470C6' }, // 统一配色方案 data: [120, 200, 150, 180] // 对应季度的数据点 }] }; // 应用配置并渲染图形 chartInstance.setOption(chartConfig); };