//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);
}
);
}