如何在html中引入引入 echarts.min.js?
时间: 2024-11-22 20:26:04 浏览: 5
echarts.min.js 5.3.3
5星 · 资源好评率100%
在HTML中引入ECharts图表库(echarts.min.js),通常需要将JavaScript文件链接到HTML文档的`<head>`部分,或者放在`<body>`的底部,以确保在页面加载完成后再加载脚本。以下是两种常见的方法:
1. 直接内联链接:
```html
<!DOCTYPE html>
<html>
<head>
<title>My ECharts Page</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> <!-- 这里替换为你实际的库版本URL -->
</head>
<body>
<!-- 其他内容 -->
</body>
</html>
```
2. 使用外部文件引用:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@latest/theme/macarons.min.css"> <!-- 可选主题样式 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<script src="your-chart-config.js"> <!-- 如果有自定义配置,可以在此引用配置文件 -->
</head>
<body>
<!-- 在这里使用id关联ECharts实例,如 <div id="main"></div> -->
</body>
</html>
```
确保替换了`https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js`为最新的库版本地址,并根据需要调整其他选项。
阅读全文