<!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">DreamCoders 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>
【前端模板】092 酷炫大屏数据可视化模板.zip
版权申诉
166 浏览量
2024-03-19
23:40:07
上传
评论
收藏 2.31MB ZIP 举报
【前端模板】092 酷炫大屏数据可视化模板.zip （22个子文件） 
092 酷炫大屏数据可视化模板 js 
echarts.js 3.5MB china.js 83KB render.js 5KB jquery-3.2.1.min.js 142KB img 
line1.png 2KB
更多内容关注公众号.gif 368KB 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 52KB fonts num.otf 2.4MB资源评论
