空气质量监测ECharts Gallery

20:11:45图表已生成
代码
function getColor(type, typeType) {
    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 '二氧化氮':
                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 = 'rgba(31, 60, 69,.88)', //'#1f1a1a',
    textColor = 'whitesmoke',
    fontFamily = '仿宋',
    $body = $(myChart.getDom());
$body.css({
    'font-family': fontFamily,
    'color': textColor
})
option = {
    title: {
        text: '',
        subtext: '数据来源：中国环境监测总站',
        sublink: 'http://123.127.175.45:8082/',
        left: 10,
        bottom: '400',
        textStyle: {
            color: textColor,
        }
    },
    grid: {
        backgroundColor: backgroundColor,
        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.value[2].toString().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',
                });
                if (data.city_code) {
                    $ul.data('code', data.city_code)
                }
                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: '{@[2]}',
                show: true,
                borderColor: '#ddd',
                borderWidth: 1,
                padding: 2,
                fontFamily: fontFamily,
                fontWeight: 'bold',
                fontSize: 13,
                color: textColor,
                textShadowColor: backgroundColor,
                textShadowBlur: 2
            }
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        }
    }]


}

$.getJSON('/asset/get/s/data-1572317283167-8bAaywO7.json', function(style) {
    const bmap = myChart.getModel().getComponent('bmap').getBMap();

    bmap.addControl(new BMap.NavigationControl());
    //bmap.addControl(new BMap.MapTypeControl());
    bmap.addControl(new BMap.GeolocationControl({
        enableAutoLocation: true
    }));
    style['绿野仙踪'].push({
        "featureType": "road",
        "elementType": "all",
        "stylers": {
            "visibility": "off"
        }
    });
    bmap.setMapStyle({
        styleJson: style['绿野仙踪']
    });
});

$.getJSON('/asset/get/s/data-1540542101402-UWs6M8hIm.json', function(data) {
    const $tbody = $('<table></table>');
    $tbody.css({
        position: 'fixed',
        right: '12px',
        bottom: '21px',
        'z-index': 9,
        'box-shadow': '0 1px 4px #ddd',
        'background-color': backgroundColor
    });
    $tbody.appendTo($body);

    myChart.setOption({
        series: [{
            data: data.filter(function(item) {
                return item.latitude && item.longitude && item.aqi;
            }).map(function(item, index) {
                item.value = [item.longitude, item.latitude].concat(item.aqi);
                item.name = item.station;
                delete item.station;
                item.code = item.station_code;
                delete item.station_code;
                return {
                    name: item.name,
                    value: item.value,
                    data: item
                };
            })
        }]
    })
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
