mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-06-17 03:34:05 +08:00
1162 lines
47 KiB
HTML
1162 lines
47 KiB
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%;">
|
||
<p>THE CURRENT PARAMETER</p>
|
||
<p><span class="currentSpeed" id="nowWeek">28</span>MM</p>
|
||
</div>
|
||
<div style="width: 31%;margin-left: 2%">
|
||
<p>THE HIGHEST PARAMETERS</p>
|
||
<p><span class="highestSpeed" id="highWeek">43</span>MM</p>
|
||
</div>
|
||
<div style="width: 30%">
|
||
<div class="rainWrap" style="margin: 10px auto;text-align: center;">
|
||
<canvas id="rainfallTwo"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="windData">
|
||
<div class="windSpeed">
|
||
<div class="windTitle numfont">ONE MONTH OF DATA</div>
|
||
<div class="windBox">
|
||
<div style="width: 33%;margin-left: 4%;">
|
||
<p>THE CURRENT PARAMETER</p>
|
||
<p><span class="currentSpeed" id="nowMonth">23</span>MM</p>
|
||
</div>
|
||
<div style="width: 31%;margin-left: 2%">
|
||
<p>THE HIGHEST PARAMETERS</p>
|
||
<p><span class="highestSpeed" id="highMonth">46</span>MM</p>
|
||
</div>
|
||
<div style="width: 30%">
|
||
<div class="rainWrap" style="margin: 10px auto;text-align: center;">
|
||
<canvas id="rainfallThree"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gust">
|
||
<div class="windTitle numfont">ANNUAL DATA</div>
|
||
<div class="windBox">
|
||
<div style="width: 33%;margin-left: 4%;">
|
||
<p>THE CURRENT PARAMETER</p>
|
||
<p><span class="currentSpeed" id="nowYear">28</span>MM</p>
|
||
</div>
|
||
<div style="width: 31%;margin-left: 2%">
|
||
<p>THE HIGHEST PARAMETERS</p>
|
||
<p><span class="highestSpeed" id="highYear">43</span>MM</p>
|
||
</div>
|
||
<div style="width: 30%">
|
||
<div class="rainWrap" style="margin: 10px auto;text-align: center;">
|
||
<canvas id="rainfallFour"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--降雨量 end-->
|
||
</div>
|
||
</div>
|
||
<script src="js/jquery-3.2.1.min.js"></script>
|
||
<script src="js/echarts.js"></script>
|
||
<script src="js/china.js"></script>
|
||
<script src="js/render.js"></script>
|
||
|
||
<script>
|
||
$(function(){
|
||
for(var i=0;i<50;i++){
|
||
$('.air-relative').find('.gray').append('<span></span>');
|
||
$('.air-absolutely').find('.gray').append('<span></span>')
|
||
}
|
||
var pressureValRel=0;//初始气压(相对)
|
||
var pressureValNowRel=32;//当前气压（相对）
|
||
function airPreRel(now,old,par){
|
||
if(now>old){
|
||
par.find('.light').append('<span></span>');
|
||
pressureValRel++;
|
||
}else if(now<old){
|
||
par.find('.light').children('span:last-child').remove();
|
||
pressureValRel--;
|
||
}else{
|
||
clearInterval(pressureRunRel);
|
||
return
|
||
}
|
||
$('.hpa-rel').text(pressureValRel*2);
|
||
}
|
||
var pressureRunRel=setInterval(function(){
|
||
airPreRel(pressureValNowRel,pressureValRel,$('.air-relative'));
|
||
},50);
|
||
|
||
var pressureValAbs=0;//初始气压(绝对)
|
||
var pressureValNowAbs=21;//当前气压（绝对）
|
||
function airPreAbs(now,old,par){
|
||
if(now>old){
|
||
par.find('.light').append('<span></span>');
|
||
pressureValAbs++;
|
||
}else if(now<old){
|
||
par.find('.light').children('span:last-child').remove();
|
||
pressureValAbs--;
|
||
}else{
|
||
clearInterval(pressureRunAbs);
|
||
return
|
||
}
|
||
$('.hpa-abs').text(pressureValAbs*2);
|
||
}
|
||
var pressureRunAbs=setInterval(function(){
|
||
airPreAbs(pressureValNowAbs,pressureValAbs,$('.air-absolutely'));
|
||
},50);
|
||
|
||
//温度和湿度
|
||
var temChart=echarts.init(document.getElementById('temChart'));
|
||
var humChart=echarts.init(document.getElementById('humChart'));
|
||
var temOption={
|
||
tooltip:{
|
||
formatter:'{a}<br/>当前：{c}℃'
|
||
},
|
||
series:[
|
||
//内圈
|
||
{
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius : '30%',
|
||
min:0,
|
||
max:10,
|
||
startAngle: 270,
|
||
endAngle: -89.99999,
|
||
splitNumber:10,
|
||
axisLine: { // 仪表盘轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[1, '#ff4500']],
|
||
width: 0,
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
axisLabel: { // 刻度标签
|
||
show:false
|
||
},
|
||
axisTick: { // 刻度
|
||
length :4, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'rgba(176,204,53,.5)'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
show:false
|
||
},
|
||
pointer: {
|
||
width:0,
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 5
|
||
},
|
||
detail : {
|
||
show : false
|
||
}
|
||
},
|
||
//中圈
|
||
{
|
||
name:'转速',
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius : '60%',
|
||
min:0,
|
||
max:10,
|
||
splitNumber:10,
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[1,'#6E6560' ]],
|
||
width: 8,
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
axisLabel: { // 刻度
|
||
textStyle: { // 属性lineStyle控制线条样式
|
||
fontWeight:'' ,
|
||
color: 'rgba(30,144,255,0)',
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
length :2, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
/*shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10*/
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length :0, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
width:0,
|
||
color: '#fff',
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
pointer: {
|
||
width:0,
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 5
|
||
},
|
||
detail : {
|
||
show : false
|
||
}
|
||
},
|
||
//外圈室内
|
||
{
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius:'100%',
|
||
min:0,
|
||
max:100,
|
||
name:'室内',
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: {
|
||
color: [[1, '#C7C5C3']],// 属性lineStyle控制线条样式
|
||
width: 1
|
||
}
|
||
},
|
||
itemStyle:{
|
||
normal:{
|
||
color:'#FF0000'
|
||
}
|
||
},
|
||
axisTick:{
|
||
length:3
|
||
},
|
||
axisLabel: { // 坐标轴小标记
|
||
textStyle: { // 属性lineStyle控制线条样式
|
||
fontWeight: 'bolder',
|
||
fontSize : 10,
|
||
fontFamily:'numfont'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length : 5, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
width:1
|
||
}
|
||
},
|
||
pointer:{
|
||
width:3,
|
||
length:'90%'
|
||
},
|
||
detail : {
|
||
show : false
|
||
},
|
||
data:[{value: 40}]
|
||
},
|
||
//外圈室外
|
||
{
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius : '100%',
|
||
min:0,
|
||
max:100,
|
||
name:'室外',
|
||
axisTick:{
|
||
length:3
|
||
},
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: {
|
||
color: [[1, '#C7C5C3']],// 属性lineStyle控制线条样式
|
||
width: 1
|
||
}
|
||
},
|
||
pointer:{
|
||
width:3,
|
||
length:'90%'
|
||
},
|
||
itemStyle:{
|
||
normal:{
|
||
color:'#B0CC35'
|
||
}
|
||
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontWeight: 'bolder',
|
||
fontSize : 16,
|
||
color: 'rgba(30,144,255,0)'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length : 5, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
width:1
|
||
}
|
||
},
|
||
detail : {
|
||
show : false
|
||
},
|
||
data:[{value: 58}],
|
||
title:{
|
||
show:false
|
||
}
|
||
}
|
||
]
|
||
};
|
||
var humOption={
|
||
tooltip:{
|
||
formatter:'{a}<br/>当前：{c}%'
|
||
},
|
||
series : [
|
||
//内圈
|
||
{
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius : '30%',
|
||
min:0,
|
||
max:10,
|
||
startAngle: 270,
|
||
endAngle: -89.99999,
|
||
splitNumber:10,
|
||
axisLine: { // 仪表盘轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[1, '#ff4500']],
|
||
width: 0,
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
axisLabel: { // 刻度标签
|
||
show:false
|
||
},
|
||
axisTick: { // 刻度
|
||
length :4, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'rgba(176,204,53,.5)'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
show:false
|
||
},
|
||
pointer: {
|
||
width:0,
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 5
|
||
},
|
||
detail : {
|
||
show : false
|
||
}
|
||
},
|
||
//中圈
|
||
{
|
||
name:'转速',
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius : '60%',
|
||
min:0,
|
||
max:10,
|
||
splitNumber:10,
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[1,'#6E6560' ]],
|
||
width: 8,
|
||
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
axisLabel: { // 刻度
|
||
textStyle: { // 属性lineStyle控制线条样式
|
||
fontWeight:'' ,
|
||
color: 'rgba(30,144,255,0)',
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
length :2, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
/*shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10*/
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length :0, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
width:0,
|
||
color: '#fff',
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
pointer: {
|
||
width:0,
|
||
shadowColor : '#fff', //默认透明
|
||
shadowBlur: 5
|
||
},
|
||
detail : {
|
||
show : false
|
||
}
|
||
},
|
||
//外圈室内
|
||
{
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius:'100%',
|
||
min:0,
|
||
max:100,
|
||
name:'室内',
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: {
|
||
color: [[1, '#C7C5C3']],// 属性lineStyle控制线条样式
|
||
width: 1
|
||
}
|
||
},
|
||
itemStyle:{
|
||
normal:{
|
||
color:'#FF0000'
|
||
}
|
||
},
|
||
axisTick:{
|
||
length:3
|
||
},
|
||
axisLabel: { // 坐标轴小标记
|
||
textStyle: { // 属性lineStyle控制线条样式
|
||
fontWeight: 'bolder',
|
||
fontSize : 10,
|
||
fontFamily:'numfont'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length : 5, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
width:1
|
||
}
|
||
},
|
||
pointer:{
|
||
width:3,
|
||
length:'90%'
|
||
},
|
||
detail : {
|
||
show : false
|
||
},
|
||
data:[{value: 40}]
|
||
},
|
||
//外圈室外
|
||
{
|
||
type:'gauge',
|
||
center : ['50%', '60%'], // 默认全局居中
|
||
radius : '100%',
|
||
min:0,
|
||
max:100,
|
||
name:'室外',
|
||
axisTick:{
|
||
length:3
|
||
},
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: {
|
||
color: [[1, '#C7C5C3']],// 属性lineStyle控制线条样式
|
||
width: 1
|
||
}
|
||
},
|
||
pointer:{
|
||
width:3,
|
||
length:'90%'
|
||
},
|
||
itemStyle:{
|
||
normal:{
|
||
color:'#B0CC35'
|
||
}
|
||
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontWeight: 'bolder',
|
||
fontSize : 16,
|
||
color: 'rgba(30,144,255,0)'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length : 5, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
width:1
|
||
}
|
||
},
|
||
detail : {
|
||
show : false
|
||
},
|
||
data:[{value: 58}],
|
||
title:{
|
||
show:false
|
||
}
|
||
}
|
||
|
||
]
|
||
};
|
||
temChart.setOption(temOption);
|
||
humChart.setOption(humOption);
|
||
var temVal=[25,36];
|
||
var humVal=[21,30];
|
||
function temHum(tem,hum){
|
||
temOption.series[2].data[0].value=tem[0];
|
||
temOption.series[3].data[0].value=tem[1];
|
||
temChart.setOption(temOption);
|
||
$('.tem-val').find('.indoor').text(tem[0]+'℃');
|
||
$('.tem-val').find('.outdoor').text(tem[1]+'℃');
|
||
humOption.series[2].data[0].value=hum[0];
|
||
humOption.series[3].data[0].value=hum[1];
|
||
humChart.setOption(humOption);
|
||
$('.hum-val').find('.indoor').text(hum[0]+"%");
|
||
$('.hum-val').find('.outdoor').text(hum[1]+"%");
|
||
}
|
||
setInterval(function(){
|
||
temVal[0]=Math.round(Math.random()*100);
|
||
temVal[1]=Math.round(Math.random()*100);
|
||
humVal[0]=Math.round(Math.random()*100);
|
||
humVal[1]=Math.round(Math.random()*100);
|
||
temHum(temVal,humVal);
|
||
},1000);
|
||
//温度k线值
|
||
//温度数据：最低温度，最高温度
|
||
var data = [
|
||
['2013/1/24', 23,28,23,28],
|
||
['2013/1/25', 21,24,21,24],
|
||
['2013/1/26', 28,24,28,24],
|
||
['2013/1/27', 21,24,21,24],
|
||
['2013/1/28', 27,21,27,21],
|
||
['2013/1/29', 20,23,20,23],
|
||
['2013/1/30', 22,27,22,27],
|
||
['2013/1/31', 23,28,23,28],
|
||
['2013/2/1', 22,24,22,24],
|
||
['2013/2/2', 26,24,26,24],
|
||
['2013/2/3', 21,24,21,24],
|
||
['2013/2/4', 29,22,29,22],
|
||
['2013/2/5', 24,33,24,33],
|
||
['2013/2/6', 23,29,27,29],
|
||
['2013/2/7', 30,27,30,27],
|
||
['2013/2/8', 21,32,21,32],
|
||
['2013/2/9', 31,24,31,24],
|
||
['2013/2/10', 27,24,27,24],
|
||
['2013/2/11', 22,34,22,34],
|
||
['2013/2/12', 20,22,20,22],
|
||
['2013/2/13', 21,24,21,24],
|
||
['2013/2/14', 25,33,25,33]
|
||
];
|
||
//数据序列化
|
||
function splitData(rawData) {
|
||
var categoryData = [];
|
||
var values = [];
|
||
for (var i = 0; i < rawData.length; i++) {
|
||
categoryData.push(rawData[i].splice(0, 1)[0]);
|
||
values.push(rawData[i])
|
||
}
|
||
return {
|
||
categoryData: categoryData,
|
||
values: values
|
||
};
|
||
}
|
||
var data0=splitData(data);
|
||
|
||
function calculateMA(dayCount, data) {
|
||
var result = [];
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
if (i < dayCount) {
|
||
result.push('-');
|
||
continue;
|
||
}
|
||
var sum = 0;
|
||
for (var j = 0; j < dayCount; j++) {
|
||
sum += data[i - j][1];
|
||
}
|
||
result.push((sum / dayCount).toFixed(2));
|
||
}
|
||
return result;
|
||
}
|
||
|
||
var dataMA5 = calculateMA(5, data0.values);
|
||
var dataMA10 = calculateMA(10, data0.values);
|
||
var dataMA20 = calculateMA(20, data0.values);
|
||
|
||
var temKOption={
|
||
tooltip:{//提示框组件
|
||
trigger: 'axis',//坐标轴触发
|
||
axisPointer: {
|
||
type: 'cross'
|
||
},
|
||
width:2
|
||
},
|
||
legend:{
|
||
data:['日K','MA5','MA10'],
|
||
top:0,
|
||
textStyle:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data0.categoryData,
|
||
boundaryGap : false,
|
||
axisLine: { lineStyle: { color: '#777' } }
|
||
},
|
||
yAxis: {
|
||
scale: true,
|
||
splitNumber: 4,//坐标轴的分割段数
|
||
axisLine: { lineStyle: { color: '#777' } },
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color:'#777'
|
||
}
|
||
},//坐标轴在 ((grid)) 区域中的分隔线。
|
||
axisTick: {
|
||
show: false
|
||
},//刻度
|
||
axisLabel: {//标签
|
||
formatter: '{value}℃'
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 50,
|
||
end: 100
|
||
}
|
||
],
|
||
grid: [{//直角坐标系内绘图网格
|
||
height:'60%',
|
||
top: 25
|
||
}],
|
||
series:[
|
||
{
|
||
type: 'candlestick',
|
||
name: '日K',
|
||
data: data0.values,
|
||
barWidth:'15%',
|
||
//barMinWidth:'10%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'red',
|
||
color0: '#B0CC35',
|
||
borderColor: 'red',
|
||
borderColor0: '#B0CC35'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'MA5',
|
||
type: 'line',
|
||
data: calculateMA(5,data0.values),
|
||
smooth: true
|
||
},
|
||
{
|
||
name: 'MA10',
|
||
type: 'line',
|
||
data: calculateMA(10,data0.values),
|
||
smooth: true,
|
||
itemStyle:{
|
||
normal:{
|
||
color:'#B0CC35'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
//温度k线图
|
||
var tempKChart=echarts.init(document.getElementById('tempKChart'));
|
||
tempKChart.setOption(temKOption);
|
||
//湿度K线图
|
||
var dityKChart=echarts.init(document.getElementById('dityKChart'));
|
||
var humKOption=temKOption;
|
||
humKOption.yAxis.axisLabel.formatter='{value}%';
|
||
dityKChart.setOption(humKOption);
|
||
|
||
//地图
|
||
var mapChart=echarts.init(document.getElementById('map'));
|
||
var series=[];
|
||
|
||
//获取数据
|
||
var geoData=[
|
||
{name:'成都',value:[103.9526,30.7617]},
|
||
{name:'金华',value:[120.0037,29.1028]},
|
||
{name:'上海',value:[121.4648,31.2891]},
|
||
{name:'梁平',value:[107.8109,30.6810]},
|
||
{name:'简阳',value:[104.5525,30.4179]}
|
||
];
|
||
//配置气泡点
|
||
geoData.forEach(function (item, i) {
|
||
series.push(
|
||
{
|
||
//name: ' Top10',
|
||
type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图
|
||
coordinateSystem: 'geo',//系列使用的坐标系,geo为地理坐标系
|
||
zlevel: 2,
|
||
rippleEffect: {//涟漪特效相关配置
|
||
brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'。
|
||
},
|
||
/* label: {//标签相关配置
|
||
normal: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{b}'//{a}、{b}、{c}，分别表示系列名，数据名，数据值
|
||
}
|
||
},*/
|
||
symbolSize: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#B0CC35'
|
||
}
|
||
},
|
||
data: [item],
|
||
tooltip:{
|
||
formatter:'{b}观测点'
|
||
}
|
||
}
|
||
);
|
||
});
|
||
|
||
|
||
var option={
|
||
|
||
tooltip:{
|
||
trigger:'item',
|
||
formatter: '{b}'
|
||
},
|
||
geo: {
|
||
map: 'china',
|
||
itemStyle:{
|
||
normal:{
|
||
areaColor:'rgba(0,0,0,1)',
|
||
borderColor:'rgb(176,203,37)'
|
||
},
|
||
emphasis:{
|
||
areaColor:'rgba(176,203,37,.8)'
|
||
}
|
||
},
|
||
selectedMode:'single',
|
||
roam: true,
|
||
silent: false,
|
||
label: {
|
||
emphasis: {
|
||
show: true,
|
||
textStyle:{
|
||
color:'#B0CC35'
|
||
}
|
||
}
|
||
|
||
}
|
||
},
|
||
series:series
|
||
};
|
||
|
||
mapChart.setOption(option);
|
||
|
||
|
||
|
||
//var mychartdata= echarts.getMap();
|
||
|
||
var btn=$('#btn');
|
||
var areaData=[
|
||
{name: '北京', selected:false,jsonname:'beijing'},
|
||
{name: '天津', selected:false,jsonname:'tianjin'},
|
||
{name: '上海', selected:false,jsonname:'shanghai'},
|
||
{name: '重庆', selected:false,jsonname:'chongqing'},
|
||
{name: '河北', selected:false,jsonname:'hebei'},
|
||
{name: '河南', selected:false,jsonname:'henan'},
|
||
{name: '云南', selected:false,jsonname:'yunnan'},
|
||
{name: '辽宁', selected:false,jsonname:'liaoning'},
|
||
{name: '黑龙江', selected:false,jsonname:'heilongjiang'},
|
||
{name: '湖南', selected:false,jsonname:'hunan'},
|
||
{name: '安徽', selected:false,jsonname:'anhui'},
|
||
{name: '山东', selected:false,jsonname:'shandong'},
|
||
{name: '新疆', selected:false,jsonname:'xinjiang'},
|
||
{name: '江苏', selected:false,jsonname:'jiangsu'},
|
||
{name: '浙江', selected:false,jsonname:'zhejiang'},
|
||
{name: '江西', selected:false,jsonname:'jiangxi'},
|
||
{name: '湖北', selected:false,jsonname:'hubei'},
|
||
{name: '广西', selected:false,jsonname:'guangxi'},
|
||
{name: '甘肃', selected:false,jsonname:'gansu'},
|
||
{name: '山西', selected:false,jsonname:'shanxi'},
|
||
{name: '内蒙古', selected:false,jsonname:'neimenggu'},
|
||
{name: '陕西', selected:false,jsonname:'shanxi'},
|
||
{name: '吉林', selected:false,jsonname:'jilin'},
|
||
{name: '福建', selected:false,jsonname:'fujian'},
|
||
{name: '贵州', selected:false,jsonname:'guizhou'},
|
||
{name: '广东', selected:false,jsonname:'guangdong'},
|
||
{name: '青海', selected:false,jsonname:'qinghai'},
|
||
{name: '西藏', selected:false,jsonname:'xizang'},
|
||
{name: '四川', selected:false,jsonname:'sichuan'},
|
||
{name: '宁夏', selected:false,jsonname:'ningxia'},
|
||
{name: '海南', selected:false,jsonname:'hainan'},
|
||
{name: '台湾', selected:false,jsonname:'taiwan'},
|
||
{name: '香港', selected:false,jsonname:'xianggang'},
|
||
{name: '澳门', selected:false,jsonname:'aomen'},
|
||
{name: '成都市', selected:false,jsonname:'chengdu'}
|
||
];
|
||
|
||
mapChart.on('geoselectchanged',function(param){
|
||
var areaName=param.batch[0].name;
|
||
for(var i=0;i<areaData.length;i++){
|
||
if(areaName == areaData[i].name){
|
||
btn.show();
|
||
var jsonName=areaData[i].jsonname;
|
||
$.getJSON('geojson/'+jsonName+'.json', function (data) {
|
||
mapChart.clear();
|
||
mapChart.setOption(option);
|
||
echarts.registerMap(jsonName, data);
|
||
option.geo.map=jsonName;
|
||
mapChart.setOption(option);
|
||
});
|
||
|
||
|
||
}
|
||
}
|
||
|
||
});
|
||
document.getElementById('btn').onclick=function(){
|
||
btn.hide();
|
||
mapChart.clear();
|
||
mapChart.setOption(option);
|
||
option.geo.map='china';
|
||
mapChart.setOption(option);
|
||
};
|
||
|
||
//风向图
|
||
var windOption={
|
||
tooltip:{},
|
||
radar:{
|
||
indicator:[
|
||
{name:'N',max:12},
|
||
{name:'NNW',max:12},
|
||
{name:'NW',max:12},
|
||
{name:'WNW',max:12},
|
||
{name:'W',max:12},
|
||
{name:'WSW',max:12},
|
||
{name:'SW',max:12},
|
||
{name:'SSW',max:12},
|
||
{name:'S',max:12},
|
||
{name:'SSE',max:12},
|
||
{name:'SE',max:12},
|
||
{name:'ESE',max:12},
|
||
{name:'E',max:12},
|
||
{name:'ENE',max:12},
|
||
{name:'NE',max:12},
|
||
{name:'NNE',max:12}
|
||
],
|
||
name:{
|
||
textStyle:{
|
||
color:'rgba(176,204,53,1)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.4)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.4)'
|
||
}
|
||
},
|
||
splitArea:{
|
||
areaStyle:{
|
||
color:'rgba(255,255,255,0)'
|
||
}
|
||
}
|
||
},
|
||
series:[{
|
||
type:'radar',
|
||
data:[
|
||
{
|
||
value:[2.8,5.3,7.1,5.4,10.6,8.5,5.1,2.1,2.9,4.0,9.4,6.3,3.5,0.9,1,0.9],
|
||
name:'2016'
|
||
}
|
||
],
|
||
areaStyle:{
|
||
normal:{
|
||
color:'rgba(176,204,53,.5)'
|
||
}
|
||
},
|
||
lineStyle:{
|
||
normal:{
|
||
color:'rgba(176,204,53,.7)'
|
||
|
||
}
|
||
},
|
||
symbol:'circle',
|
||
symbolSize:6,
|
||
itemStyle:{
|
||
normal:{
|
||
color:'#A9C33B'
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
var windChart=echarts.init(document.getElementById('windChart'));
|
||
windChart.setOption(windOption);
|
||
|
||
//风速与阵风数据
|
||
var speed={
|
||
wind:[12.2,12.8],
|
||
gust:[2.8,4.3]
|
||
};
|
||
function getData(){
|
||
$('#nowWind').text(speed.wind[0]);
|
||
$('#highWind').text(speed.wind[1]);
|
||
var windSpeed=(50-speed.wind[0])*10;
|
||
$('.windSpeed .windFan').css('animation-duration', windSpeed+'ms');
|
||
$('#nowGust').text(speed.gust[0]);
|
||
$('#highGust').text(speed.gust[1]);
|
||
var gustSpeed=(50-speed.gust[0])*10;
|
||
$('.gust .windFan').css('animation-duration', gustSpeed+'ms');
|
||
}
|
||
getData();
|
||
|
||
//降雨量
|
||
function creatBall(ele,data){
|
||
new WaterPolo(ele,{
|
||
cW:55,
|
||
cH:55,
|
||
baseY:data
|
||
})
|
||
}
|
||
creatBall('rainfallOne',80);
|
||
creatBall('rainfallTwo',60);
|
||
creatBall('rainfallThree',30);
|
||
creatBall('rainfallFour',20);
|
||
|
||
|
||
|
||
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |