<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>酷炫大屏数据可视化模板</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div class="content">
<div class="left">
<!--气压-->
<div class="air">
<div class="air-title title numfont">AIR PRESSURE</div>
<div class="air-relative">
<div class="air-val">
<span class="air-icon"></span>
<div class="numfont">
<p class="hpa-rel"></p>
<p class="hpa-nam">Relative pressure</p>
</div>
</div>
<div class="gray"></div>
<div class="light"></div>
<div class="unit">HPA</div>
</div>
<div class="air-absolutely">
<div class="air-val">
<span class="air-icon"></span>
<div class="numfont">
<p class="hpa-abs"></p>
<p class="hpa-nam">Absolute pressure</p>
</div>
</div>
<div class="gray"></div>
<div class="light"></div>
<div class="unit">HPA</div>
</div>
</div>
<!--气压 end-->
<!--温度和湿度-->
<div class="tem-hum">
<div class="temperature">
<div class="tem-hum-title numfont">THE TEMPERATURE</div>
<div class="tem-hum-chart" id="temChart"></div>
<div class="tem-val">
<span class="indoor">22℃</span>
<span class="outdoor">33℃</span>
</div>
</div>
<div class="humidity">
<div class="tem-hum-title numfont">HUMIDITY</div>
<div class="tem-hum-chart" id="humChart"></div>
<div class="hum-val">
<span class="indoor">22%</span>
<span class="outdoor">33%</span>
</div>
</div>
</div>
<!--温度和湿度 end-->
<!--温度一周k线图-->
<div class="temp-k">
<div class="title numfont">TEMPERATURE CHART</div>
<div id="tempKChart"></div>
</div>
<!--温度一周k线图 end-->
<!--湿度一走k线图-->
<div class="dity-k">
<div class="title numfont">HUMIDITY CHART</div>
<div id="dityKChart"></div>
</div>
<!--湿度一走k线图 end-->
</div>
<div class="middle">
<div class="headTitle">WEATHER STATION</div>
<!--地图-->
<div class="chinaMap" style="color: white">
<div class="circle0"></div>
<div id="btn" style="display: none">
<div style="position: relative">
<div class="btn0"></div>
<div class="btn1"></div>
<div class="btn2"></div>
</div>
</div>
<div class="mapBox">
<div id="map"></div>
</div>
<div class="circle1"></div>
</div>
<!--地图 end-->
<!--动画-->
<div class="lineRun"></div>
<!--动画 end-->
</div>
<div class="right">
<div class="information">
<!--基本信息-->
<div class="baseInfo">
<p class="infoTitle">TEST SITE</p>
<p class="area">LP-COUNTY</p>
<p class="infoTitle">
TEST DATE
<span class="date">2017-08-06</span>
</p>
<p class="infoTitle">
SITE ID
<span class="idNum">1921210001</span>
</p>
<p class="infoTitle">
<span
class="infoTitle"
style="display: inline-block; margin-right: 40px"
>TESTING<br />TIME</span
>
<span class="days">70</span>
<span class="infoTitle">DAY</span>
</p>
</div>
<!--基本信息 end-->
<!--温度/露点/风寒/热指数-->
<div class="temData">
<p class="infoTitle" style="margin-bottom: 0; font-size: 12px">
INDOOR MAXIMUM
</p>
<p class="temTitle">TEMPERATURE</p>
<p class="indoorTem"><span class="temperatureN">70</span>℃</p>
<p class="infoTitle point">
DEW POINT
<span class="dewpoint">21℃</span>
</p>
<p class="infoTitle point">
WIND CHILL
<span class="windchill">21℃</span>
</p>
<p class="infoTitle point">
HEAT NUMBER
<span class="heatnumber">21℃</span>
</p>
</div>
<!--温度/露点/风寒/热指数 end-->
</div>
<!--风-->
<div class="wind">
<div class="air-title title numfont">THE WIND INDEX</div>
<div id="windChart"></div>
<div class="windData">
<div class="windSpeed">
<div class="windTitle numfont">THE WIND SPEED</div>
<div class="windBox">
<div style="width: 33%; margin-left: 4%">
<p>CURRENT WIND SPEED</p>
<p><span class="currentSpeed" id="nowWind">23</span>M/S</p>
</div>
<div style="width: 33%">
<p>CURRENT WIND SPEED</p>
<p><span class="highestSpeed" id="highWind">46</span>M/S</p>
</div>
<div style="width: 30%">
<div class="windWrap">
<img src="img/wind1.png" class="windFan" />
</div>
</div>
</div>
</div>
<div class="gust">
<div class="windTitle numfont">GUST</div>
<div class="windBox">
<div style="width: 33%; margin-left: 4%">
<p>CURRENT WIND SPEED</p>
<p><span class="currentSpeed" id="nowGust">28</span>M/S</p>
</div>
<div style="width: 33%">
<p>CURRENT WIND SPEED</p>
<p><span class="highestSpeed" id="highGust">43</span>M/S</p>
</div>
<div style="width: 30%">
<div class="windWrap">
<img src="img/wind1.png" class="windFan" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--风 end-->
<!--降雨量-->
<div class="rainfall">
<div class="air-title title numfont">RAINFALL</div>
<div class="windData">
<div class="windSpeed">
<div class="windTitle numfont">ONE DAY OF DATA</div>
<div class="windBox">
<div style="width: 33%; margin-left: 4%">
<p>THE CURRENT PARAMETER</p>
<p><span class="currentSpeed" id="nowDay">23</span>MM</p>
</div>
<div style="width: 31%; margin-left: 2%">
<p>THE HIGHEST PARAMETERS</p>
<p><span class="highestSpeed" id="highDay">46</span>MM</p>
</div>
<div style="width: 30%">
<div
class="rainWrap"
style="margin: 10px auto; text-align: center"
>
<canvas id="rainfallOne"></canvas>
</div>
</div>
</div>
</div>
<div class="gust">
<div class="windTitle numfont">WEEKLY DATA</div>
<div class="windBox">
<div style="width: 33%; margin-left: 4%">
092 酷炫大屏数据可视化模板.rar
需积分: 0 16 浏览量
2024-03-17
15:39:34
上传
评论
收藏 1.56MB RAR 举报
092 酷炫大屏数据可视化模板.rar （21个子文件） 
js 
echarts.js 3.57MB china.js 84KB render.js 5KB jquery-3.2.1.min.js 145KB img 
line1.png 2KB wind1.png 5KB barfoot0.png 1KB wind0.png 2KB verticalline.png 1KB line.png 1KB animate.png 3KB leftline.png 1KB bg.png 9KB bartop1.png 1KB barfoot1.png 1KB close0.png 6KB close2.png 1KB close1.png 5KB css index.css 8KB
index.html 43KB fonts num.otf 2.4MB资源评论
