京津冀空气质量echarts effectScatter配置项内容和展示
数据来源：中国环境监测总站
配置项如下
function getColor(type) {
var color;
if (isNaN(type)) {
switch (type) {
case '暂无数据':
color = 'gray';
break;
case '优':
color = '#43ce17';
break;
case '良':
color = '#efdc31';
break;
case '轻度污染':
color = '#fa0';
break;
case '中度污染':
color = '#ff401a';
break;
case '重度污染':
color = '#d20040';
break;
case '严重污染':
color = '#9c0a4e';
break;
case 'AQI':
color = 'hsl(40,100%,50%)';
break;
case '臭氧':
color = 'hsl(80,100%,50%)';
break;
case '二氧化硫':
color = 'hsl(120,100%,50%)';
break;
case 'NO2':
color = 'hsl(160,100%,50%)';
break;
case '一氧化碳':
color = 'hsl(200,100%,50%)';
break;
case '细颗粒物':
color = 'hsl(240,100%,50%)';
break;
case '可吸入颗粒物':
color = 'hsl(280,100%,50%)';
break;
default:
break;
}
} else {
function getAQITYPE(aqi) {
if (aqi <= 50) {
return '优';
} else if (aqi <= 100) {
return '良';
} else if (aqi <= 150) {
return '轻度污染';
} else if (aqi <= 200) {
return '中度污染';
} else if (aqi <= 300) {
return '重度污染';
} else {
return '严重污染';
}
}
color = getColor(getAQITYPE(type));
}
return color;
}
let backgroundColor, //'#1f1a1a',
textColor = 'gray',
fontFamily = '仿宋',
$body = $(myChart.getDom());
$body.css({
'font-family': fontFamily
})
option = {
title: {
subtext: '数据来源：中国环境监测总站',
sublink: 'http://123.127.175.45:8082/',
left: 10,
bottom: '400',
textStyle: {
color: textColor,
}
},
grid: {
show: false,
containLabel: true,
zlevel: '2',
left: '10',
bottom: '180',
width: '30%',
height: '30%',
borderWidth: 0
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
bmap: {
roam: true,
center: [116.39825, 40.045975]
},
visualMap: [{
seriesIndex: 0,
backgroundColor: 'whitesmoke',
bottom: 2,
left: 2,
borderRadius: 0,
itemWidth: 38,
itemGap: 4,
padding: 5,
inverse: true,
pieces: [{
value: 'NaN',
label: '暂无',
color: getColor('暂无'),
}, {
min: 0,
max: 50,
label: '优',
color: getColor('优')
},
{
min: 51,
max: 100,
label: '良',
color: getColor('良')
}, {
min: 101,
max: 150,
label: '轻度',
color: getColor('轻度污染')
}, {
min: 151,
max: 200,
label: '中度',
color: getColor('中度污染')
}, {
min: 201,
max: 300,
label: '重度',
color: getColor('重度污染')
}, {
min: 301,
label: '严重',
color: getColor('严重污染')
},
],
textStyle: {
color: 'black'
}
}],
tooltip: {
trigger: 'item',
confine: true,
enterable: true,
textStyle: {
fontFamily: fontFamily
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'bmap',
symbol: 'rect',
symbolSize: function(a, p) {
var size = [12 * (p.name.length), 25];
return size;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
tooltip: {
formatter: function(params) {
const data = params.data.data;
var $ul = $('<ul><li><b>' + params.name + '</b></li></ul>');
$ul.css({
'font-size': 'small',
'border-radius': '5px',
'list-style': 'none',
padding: '10px',
'box-shadow': '0 1px 4px #ddd',
//'background-color': 'rgba(0,0,0,.21)',
color: params.color
});
$ul.children().first().css({
'font-size': 'large',
'border-bottom': '1px double',
});
let option = {
title: {
text: data.name
},
grid: {
show: true
},
yAxis: {
type: 'category',
axisLabel: {
rotate: -45,
textStyle: {
color: 'white'
},
show: false,
},
data: [],
show: false,
name: data.name,
nameLocation: 'end',
nameTextStyle: {
color: 'white'
},
},
series: [{}, {
zlevel: '2',
type: 'bar',
gridIndex: 0,
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: '{b}:{c}',
fontFamily: fontFamily,
fontWeight: 'bold'
}
},
data: []
}]
};
$ul.children().first().find('b').css({
'color': 'whitesmoke',
'text-shadow': '0 1px 2px black'
})
if (data.aqi) {
$ul.children().first().append('<b style="font-size: xx-large;float: right;">' + data.aqi + '</b>');
option.yAxis.data.push('AQI');
option.series[1].data.push({
value: data.aqi,
itemStyle: {
color: getColor(data.aqi)
}
});
}
if (data.pm2_5) {
$('<li><b>细颗粒物：</b>' + data.pm2_5 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('细颗粒物');
option.series[1].data.push({
value: data.pm2_5,
itemStyle: {
color: getColor('细颗粒物')
}
});
}
if (data.pm10) {
$('<li><b>可吸入颗粒物：</b>' + data.pm10 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('可吸入颗粒物');
option.series[1].data.push({
value: data.pm10,
itemStyle: {
color: getColor('可吸入颗粒物')
}
});
}
if (data.o3) {
$('<li><b>臭氧：</b>' + data.o3 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('臭氧');
option.series[1].data.push({
value: data.o3,
itemStyle: {
color: getColor('臭氧')
}
});
}
if (data.co) {
$('<li><b>一氧化碳：</b>' + data.co + '<span>mg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('一氧化碳');
option.series[1].data.push({
value: data.co,
itemStyle: {
color: getColor('一氧化碳')
}
});
}
if (data.so2) {
$('<li><b>二氧化硫：</b>' + data.so2 + '<span>μg/m<sup>3</sup></span></li>').appendTo($ul);
option.yAxis.data.push('二氧化硫');
option.series[1].data.push({
value: data.so2,
itemStyle: {
color: getColor('二氧化硫')
}
});
}
/*if (data.pubtime) {
$('<li><b>监测时间：</b>' + new Date(data.pubtime).toLocaleString() + '</li>').appendTo($ul);
}*/
$ul.children('li').find('span').css('font-size', 'xx-small');
myChart.setOption(option);
return $ul.prop('outerHTML');
}
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
//position: 'right',
show: true,
borderColor: '#ddd',
borderWidth: 1,
fontFamily: fontFamily,
fontWeight: 'bold',
fontSize: 13,
color: 'whitesmoke',
padding: 4
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: '#333'
}
}
}]
}
setTimeout(function() {
const data = [{
"name": "张家口市",
"o3": 61,
"pubtime": "2018-12-28 14:00:00",
"latitude": "40.812435",
"pm2_5": 10,
"so2": 6,
"aqi": 23,
"pm10": 23,
"city_code": "131200",
"co": 0.2,
"longitude": "114.89305"
}, {
"name": "秦皇岛市",
"o3": 55,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.9366",
"pm2_5": 15,
"so2": 10,
"aqi": 28,
"pm10": 28,
"city_code": "130300",
"co": 0.8,
"longitude": "119.60482"
}, {
"name": "承德市",
"o3": 58,
"pubtime": "2018-12-28 14:00:00",
"latitude": "40.96416",
"pm2_5": 7,
"so2": 6,
"aqi": 31,
"pm10": 31,
"city_code": "130800",
"co": 0.3,
"longitude": "117.92774"
}, {
"name": "北京市",
"o3": 53,
"pubtime": "2018-12-28 14:00:00",
"latitude": "40.045975",
"pm2_5": 9,
"so2": 3,
"aqi": 32,
"pm10": 32,
"city_code": "110000",
"co": 0.3,
"longitude": "116.39825"
}, {
"name": "石家庄市",
"o3": 57,
"pubtime": "2018-12-28 14:00:00",
"latitude": "38.03179861125",
"pm2_5": 15,
"so2": 12,
"aqi": 34,
"pm10": 34,
"city_code": "130100",
"co": 0.7,
"longitude": "114.4970652875"
}, {
"name": "唐山市",
"o3": 55,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.6449533333333",
"pm2_5": 19,
"so2": 8,
"aqi": 36,
"pm10": 36,
"city_code": "130200",
"co": 0.6,
"longitude": "118.182916666667"
}, {
"name": "廊坊市",
"o3": 58,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.54584",
"pm2_5": 12,
"so2": 4,
"aqi": 40,
"pm10": 40,
"city_code": "131000",
"co": 0.5,
"longitude": "116.72406"
}, {
"name": "沧州市",
"o3": 65,
"pubtime": "2018-12-28 14:00:00",
"latitude": "38.3157666666667",
"pm2_5": 16,
"so2": 12,
"aqi": 45,
"pm10": 45,
"city_code": "130900",
"co": 0.5,
"longitude": "116.871566666667"
}, {
"name": "天津市",
"o3": 51,
"pubtime": "2018-12-28 14:00:00",
"latitude": "39.0985566666667",
"pm2_5": 8,
"so2": 6,
"aqi": 51,
"pm10": 52,
"city_code": "120000",
"co": 0.4,
"longitude": "117.319033333333"
}, {
"name": "保定市",
"o3": 54,
"pubtime": "2018-12-28 14:00:00",
"latitude": "38.8762666666667",
"pm2_5": 24,
"so2": 18,
"aqi": 52,
"pm10": 53,
"city_code": "130600",
"co": 0.6,
"longitude": "115.4852"
}, {
"name": "衡水市",
"o3": 55,
"pubtime": "2018-12-28 14:00:00",
"latitude": "37.74335",
"pm2_5": 28,
"so2": 12,
"aqi": 54,
"pm10": 57,
"city_code": "131100",
"co": 0.6,
"longitude": "115.6743"
}, {
"name": "邢台市",
"o3": 52,
"pubtime": "2018-12-28 14:00:00",
"latitude": "37.0771",
"pm2_5": 31,
"so2": 14,
"aqi": 54,
"pm10": 58,
"city_code": "130500",
"co": 0.5,
"longitude": "114.506675"
}, {
"name": "邯郸市",
"o3": 49,
"pubtime": "2018-12-28 14:00:00",
"latitude": "36.60786",
"pm2_5": 32,
"so2": 18,
"aqi": 64,
"pm10": 77,
"city_code": "130400",
"co": 0.8,
"longitude": "114.513875"
}].sort(function(a,b){
return a.aqi>b.aqi;
});
const $tbody = $('<table></table>');
$tbody.css({
position: 'fixed',
right: '12px',
bottom: '21px',
'z-index': 9,
'box-shadow': '0 1px 4px #ddd',
});
$tbody.appendTo($body);
myChart.setOption({
series: [{
data: data.filter(function(item) {
return item.latitude && item.longitude;
}).map(function(item, index) {
item.value = [item.longitude, item.latitude].concat(item.aqi);
var $tr = $('<tr><td>' + (index + 1) + '</td><td>' + item.name + '</td><td>' + (item.aqi ? item.aqi : '--') + '</td></tr>');
$tr.appendTo($tbody);
$tr.children().not(':eq(1)').css({
'text-align': 'center'
});
$tr.children().css({
'border-bottom': '1px dotted'
});
$tr.children().last().css('background-color', getColor(item.aqi));
return {
name: item.name,
value: item.value,
data: item
};
})
}]
})
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.setMinZoom(7);
bmap.setMaxZoom(10);
bmap.addControl(new BMap.NavigationControl());
const $mapStyle = $('<select></select');
$mapStyle.css({
position: 'fixed',
right: '.521%',
top: '.521%'
});
$mapStyle.appendTo($body);
$mapStyle.append('<option value="normal"></option>');
$mapStyle.append('<option value="dark">极夜黑</option>');
$mapStyle.change(function() {
let style = $(this).val();
console.log(style)
switch (style) {
case 'normal':
case 'dark':
case 'light':
bmap.setMapStyle({
style: style
});
break;
default:
json = $(this).find('option:selected').data('json');
json.push({
"featureType": "road",
"elementType": "all",
"stylers": {
"visibility": "off"
}
});
bmap.setMapStyle({
styleJson: json
});
}
function resetColor(backgroundColor, textColor) {
myChart.setOption({
title: {
textStyle: {
color: textColor,
}
},
grid: {
backgroundColor: backgroundColor
},
tooltip: {
backgroundColor: backgroundColor
},
series: [{
label: {
backgroundColor: backgroundColor,
color: textColor
}
}]
});
$body.css({
'background-color': backgroundColor,
'color': textColor
});
$tbody.css({
'background-color': backgroundColor
})
}
switch (style) {
case '一蓑烟雨':
resetColor('rgba(237, 243, 243,.88)', 'gray');
break;
case 'dark':
resetColor('rgba(33, 33, 33,.88)', 'white');
break;
case '绿野仙踪':
resetColor('rgba(31, 60, 69,.88)', 'whitesmoke');
break;
case '青花瓷':
resetColor('rgba(241, 241, 241,.88)', 'rgb(27, 129, 197)');
break;
default:
resetColor(backgroundColor, textColor);
}
});
const bmapStyleURL = "/asset/get/s/data-1572317283167-8bAaywO7.json";
$.getJSON(bmapStyleURL, function(style) {
for (key in style) {
if (key != '眼眸') {
let $option = $('<option>' + key + '</option>');
$option.data('json', style[key]);
$mapStyle.append($option);
}
}
$mapStyle.children().eq(3).prop('selected', true);
$mapStyle.trigger('change');
});
}, 100);
截图如下
