zmcoding
/
data_view


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162
							<!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>