静态页面html引入echarts的集中方法
时间: 2023-10-10 21:05:52 浏览: 66
在静态页面 HTML 中引入 ECharts 的集中方法包括以下两种方式:
1. 下载 ECharts 后直接引入
将 ECharts 的 JavaScript 文件下载到本地,然后在 HTML 页面中使用 `<script>` 标签引入即可。这种方式的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>引入 ECharts</title>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script src="./echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var option = {
// 配置图表参数
};
myChart.setOption(option);
</script>
</body>
</html>
```
2. 使用 CDN 引入
CDN(内容分发网络)是一种通过分布式部署在不同地点的服务器,以就近访问提高用户访问网站时的响应速度和成功率的网络系统。ECharts 官方提供了 CDN 服务,可以通过引入 CDN 来使用 ECharts。这种方式的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>引入 ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var option = {
// 配置图表参数
};
myChart.setOption(option);
</script>
</body>
</html>
```
以上两种方式都可以在静态页面 HTML 中引入 ECharts,具体选择哪种方式,可以根据实际情况和需求来决定。