' + params.name + '

'); $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('' + data.aqi + ''); option.yAxis.data.push('AQI'); option.series[1].data.push({ value: data.aqi, itemStyle: { color: getColor(data.aqi) } }); } if (data.pm2_5) { $('

细颗粒物：' + data.pm2_5 + 'μg/m³

').appendTo($ul); option.yAxis.data.push('细颗粒物'); option.series[1].data.push({ value: data.pm2_5, itemStyle: { color: getColor('细颗粒物') } }); } if (data.pm10) { $('

可吸入颗粒物：' + data.pm10 + 'μg/m³

').appendTo($ul); option.yAxis.data.push('可吸入颗粒物'); option.series[1].data.push({ value: data.pm10, itemStyle: { color: getColor('可吸入颗粒物') } }); } if (data.o3) { $('

臭氧：' + data.o3 + 'μg/m³

').appendTo($ul); option.yAxis.data.push('臭氧'); option.series[1].data.push({ value: data.o3, itemStyle: { color: getColor('臭氧') } }); } if (data.co) { $('

一氧化碳：' + data.co + 'mg/m³

').appendTo($ul); option.yAxis.data.push('一氧化碳'); option.series[1].data.push({ value: data.co, itemStyle: { color: getColor('一氧化碳') } }); } if (data.so2) { $('

二氧化硫：' + data.so2 + 'μg/m³

').appendTo($ul); option.yAxis.data.push('二氧化硫'); option.series[1].data.push({ value: data.so2, itemStyle: { color: getColor('二氧化硫') } }); } /*if (data.pubtime) { $('

监测时间：' + new Date(data.pubtime).toLocaleString() + '

').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 = $('

'); $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 = $('' + (index + 1) + '' + item.name + '' + (item.aqi ? item.aqi : '--') + ''); $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 = $('

Echarts在线免费图表