//Aqi Bar function getfullname(name){ var title = ""; switch(name){ case 'Excellent': title = 'Excellent (AQI 0-50)'; break; case 'Light': title ='Lightly (AQI-51-100)'; break; case 'Moderate': title = 'Moderate (AQI 101-200)'; break; case 'Heavy': title = 'Heavy (AQI 201-300)'; break; case 'Severe': title = 'Severe (AQI 301+)'; break; default: break; } return title; } function getcolor(tmpdata) { var colorList = [ '#00B050','#FFFF00','#F79646','#FF0000','#000000' ]; var color = ""; switch(tmpdata){ case 'Excellent': color = '#00B050'; break; case 'Light': color ='#FFFF00'; break; case 'Moderate': color = '#F79646'; break; case 'Heavy': color = '#FF0000'; break; case 'Severe': color = '#000000'; break; default: break; } return color; } function getMonthdataBar(data,month){ var chkydata = 0; var obj=new Object(); obj.Excellent = 0; obj.Light = 0; obj.Moderate = 0; obj.Heavy = 0; obj.Severe = 0; var myval = []; JSON.parse(data, function (key, value) { var searchstr = month + '-'; if(key.indexOf(month) > -1){ //console.log(value); //value = isNaN(parseInt(value)) ? 62 : value; value = parseInt(value); if(!isNaN(value)){ chkydata ++; if(value<=50){ obj.Excellent++; }else if(value>50 && value<=100){ obj.Light++; }else if(value>100 && value<=200){ obj.Moderate++; }else if(value>200 && value<=300){ obj.Heavy++; }else{ obj.Severe++; } } //myval.push(parseInt(value)); } }); var mysearise = []; var xdata = []; var ydata = []; for(var key in obj){ xdata.push(key); //mysearise.push(getfullname(key)); //ydata.push(parseInt(obj[key])); ydata.push({ name:key, data:[parseInt(obj[key])], type:'bar', itemStyle: { normal: { label: { show:true, position: 'top', formatter: function(params){ var c = params.value; if(c>0){ return c + ' day' + (c>1 ? 's' : ''); }else{ return ''; } }, textStyle : { color:'#000' } }, color: function(params){ return getcolor(params.series.name); } } } }); } // 路径配置 require.config({ paths: { echarts: 'http://data.chinahighlights.com/js/echart/dist' } }); require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { if(chkydata < 1){ return; } // 基于准备好的dom,初始化echarts图表 var echartsId = ''; if(typeof($('#barmain_in').html()) != 'undefined'){ $('.aqichart').css({ width: '700px', height: '300px' }); echartsId = 'barmain_in'; //var myChart = ec.init(document.getElementById('barmain_in')); }else{ $('.aqichart_default').css({ width: '700px', height: '300px' }); echartsId = 'barmain'; } var myChart = ec.init(document.getElementById(echartsId)); option = { title : { text: $('#aqititle').text(), //subtext: 'whinahighlights.com', //sublink: '//www.chinahighlights.com', x:'center' }, tooltip : { trigger: 'item', //item|axis axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow', // 默认为直线,可选为:'line' | 'shadow' }, formatter:function(params,ticket){ //console.log(params) return getfullname(params.seriesName); } }, legend: { data:xdata, x: 'center', // 'center' | 'left' | {number}, y: 'bottom', // 'center' | 'bottom' | {number} selectedMode:false, }, xAxis : [ { type : 'category', data : ['Pollution Categories'] } ], yAxis : [ { type : 'value', name : 'Days' } ], series : ydata }; // 为echarts对象加载数据 myChart.setOption(option); } ); } //AQI Line function sortNumber(a,b){ return a - b } function getMonthdataLine(data,month){ var objVal=new Object(); var objDate=new Object(); var mydate = []; var myDate = []; var myval = []; JSON.parse(data, function (key, value) { var searchstr = month + '-'; if(key.indexOf(month) > -1){ var keys = parseInt(key.replace(searchstr,"")); //console.log(value); //objVal[keys] = isNaN(parseInt(value)) ? 62 : value; if(!isNaN(parseInt(value))){ objVal[keys] = parseInt(value); objDate[keys] = keys; mydate.push(parseInt(keys)); } //myval.push(parseInt(value)); } }); mydate.sort(sortNumber); //console.log(obj); for(var p in mydate){ var i = mydate[p]; myval.push(parseInt(objVal[i])); myDate.push(objDate[i]); } // 路径配置 require.config({ paths: { echarts: 'http://data.chinahighlights.com/js/echart/dist' } }); require( [ 'echarts', 'echarts/chart/line' // 按需加载 ], function (ec) { if(mydate.length < 1){ return; } var echartsId = ''; if(typeof($('#linemain_in').html()) != 'undefined'){ $('.aqichart').css({ width: '700px', height: '300px' }); echartsId = 'linemain_in'; //var myChart = ec.init(document.getElementById('barmain_in')); }else{ $('.aqichart_default').css({ width: '700px', height: '300px' }); echartsId = 'linemain'; } var myChart = ec.init(document.getElementById(echartsId)); option = { /*title : { text: 'Air Quality in Beijing in May 2014', x:'center' subtext: 'From Chinahighlights.com', sublink: '//www.chinahighlights.com' },*/ title: false, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter:function(params){ //console.log(params); //console.log(params.name); if(!isNaN(parseInt(params[0].name))){ return month + '-' + ('0'+params[0].name).substr(-2) + "
AQI: " + params[0].data; }else{ //console.log(params.data); if(params[0].data.type == 'average'){ return params[0].data.name + "
AQI: " + params[0].data.value; }else{ return ''; } } } }, xAxis : [ { type : 'category', data : myDate, name : 'Date' } ], yAxis : [ { type : 'value', name : 'AQI' } ], series : [ { name:'AQI', type:'line', data:myval, itemStyle: { normal: { //color:'#cd09f0', color: function(params) { // build a color map as your need. //console.log(params.data); var colorList = [ '#00B050','#FFFF00','#F79646','#FF0000','#000000' ]; var tmp = 0; var tmpdata = params.data; if(tmpdata<=50){ return colorList[0] }else if(tmpdata>50 && tmpdata<=100){ return colorList[1] }else if(tmpdata>100 && tmpdata<=200){ return colorList[2] }else if(tmpdata>200 && tmpdata<=300){ return colorList[3] }else{ return colorList[4] } }, label: { show: false, position: 'top', formatter: '{c}', }, lineStyle: { color:'#BE4B48' } } }, markLine : { data : [ {type : 'average', name : 'Average AQI for the month'} ] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); }