设计一个html页面上下两个统计图,并且根据可以跟随浏览器的缩放而变化大小
时间: 2024-03-17 10:46:51 浏览: 54
好的,我可以为您提供一份简单的HTML代码,其中包含两个统计图,并且可以跟随浏览器的缩放而变化大小。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>统计图</title>
<style>
/* 样式表 */
.chart {
height: 300px;
width: 100%;
background-color: #f0f0f0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 上面的统计图 -->
<div class="chart" id="chart1"></div>
<!-- 下面的统计图 -->
<div class="chart" id="chart2"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
// 使用 ECharts 初始化上面的统计图
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
// 配置选项
title: {
text: '上面的统计图'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
chart1.setOption(option1);
// 使用 ECharts 初始化下面的统计图
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
// 配置选项
title: {
text: '下面的统计图'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
chart2.setOption(option2);
// 监听窗口大小改变事件,重新渲染图表
window.onresize = function() {
chart1.resize();
chart2.resize();
}
</script>
</body>
</html>
```
在这个代码中,我使用了 ECharts 这个 JavaScript 库来创建统计图,同时使用了 CSS 样式表来控制图表的高度、宽度和间距。为了让图表能够响应浏览器的缩放事件,我在代码中添加了一个监听器函数,当窗口大小改变时,会重新渲染图表。
阅读全文