html如何在一个网页显示多个echarts图表,所有代码在一个html文件中写
时间: 2024-05-05 20:21:37 浏览: 14
可以在一个HTML文件中使用多个div元素来容纳多个echarts图表,并在每个div元素中使用不同的id来区分它们。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Echarts Example</title>
<!-- 引入echarts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart1" style="width: 600px;height:400px;"></div>
<div id="chart2" style="width: 600px;height:400px;"></div>
<div id="chart3" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 初始化echarts实例
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
var chart3 = echarts.init(document.getElementById('chart3'));
// 配置图表数据
var option1 = {
title: {
text: 'Chart 1'
},
... // 省略其他配置
};
var option2 = {
title: {
text: 'Chart 2'
},
... // 省略其他配置
};
var option3 = {
title: {
text: 'Chart 3'
},
... // 省略其他配置
};
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option1);
chart2.setOption(option2);
chart3.setOption(option3);
</script>
</body>
</html>
```
在这个示例中,我们创建了三个div元素分别用于容纳三个echarts图表,并分别用不同的id('chart1', 'chart2', 'chart3')来区分它们。然后,我们使用JavaScript代码初始化了三个echarts实例,将它们分别绑定到不同的div元素上,并为每个实例设置不同的配置项和数据,最后使用setOption方法将它们显示出来。