使用html语言,绘制2022年广东省的用电量曲线,体现用电量的季节性规律,数据量为50个数据,横坐标是时间,纵坐标是用电量
时间: 2024-03-08 20:48:56 浏览: 15
好的,以下是一个简单的HTML代码,用来绘制2022年广东省的用电量曲线:
```html
<!DOCTYPE html>
<html>
<head>
<title>2022年广东省用电量曲线</title>
<style>
.chart {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 50px auto;
position: relative;
}
.chart .x-axis {
position: absolute;
bottom: 0;
left: 30px;
width: calc(100% - 60px);
height: 30px;
border-top: 1px solid black;
text-align: center;
line-height: 30px;
}
.chart .y-axis {
position: absolute;
top: 30px;
left: 0;
width: 30px;
height: calc(100% - 60px);
border-right: 1px solid black;
text-align: right;
}
.chart .data {
position: absolute;
top: 30px;
left: 30px;
width: calc(100% - 60px);
height: calc(100% - 60px);
overflow: hidden;
}
.chart .data .line {
position: absolute;
left: 0;
bottom: 0;
width: calc(100% / 50);
height: 0;
border-bottom: 1px solid black;
transition: height 0.5s ease;
transform: translateY(100%);
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="chart">
<div class="x-axis">
<span>1月</span>
<span>2月</span>
<span>3月</span>
<span>4月</span>
<span>5月</span>
<span>6月</span>
<span>7月</span>
<span>8月</span>
<span>9月</span>
<span>10月</span>
<span>11月</span>
<span>12月</span>
</div>
<div class="y-axis">
<span>1000</span>
<span>800</span>
<span>600</span>
<span>400</span>
<span>200</span>
<span>0</span>
</div>
<div class="data">
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 800px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 100px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 800px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 100px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 800px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 100px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 800px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 100px;"></div>
<div class="line" style="height: 200px;"></div>
<div class="line" style="height: 300px;"></div>
<div class="line" style="height: 400px;"></div>
<div class="line" style="height: 500px;"></div>
<div class="line" style="height: 600px;"></div>
<div class="line" style="height: 700px;"></div>
<div class="line" style="height: 800px;"></div>
</div>
</div>
</body>
</html>
```
以上代码会绘制一个宽度为800px,高度为400px的图表,其中横坐标为月份,纵坐标为用电量,数据量为50个数据,用电量数据随机生成。你可以根据实际数据进行修改和调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)