bmap+echartsECharts Gallery

20:11:45图表已生成
代码
var data = [{
        COMPANY: '0001',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0002',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0003',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0004',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0005',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0006',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0007',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0008',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0009',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0010',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0011',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0012',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0013',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0014',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0015',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0016',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0017',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0018',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0019',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0020',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0021',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0022',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0023',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0024',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0025',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0026',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0027',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0028',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0029',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        name: '0030',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0031',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0032',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0033',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0034',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    }, {
        COMPANY: '0035',
        DJYCS: 0,
        GZPYCS: 0,
        CZPYCS: 0,
        QXYCS: 0,
        DQGZYCS: 0
    },

];
var geoCoordMap = {
    "0001": [113.22, 33.00],
    "0002": [118.28, 33.97],
    "0003": [119.28, 26.11],
    "0004": [119.58, 32.16],
    "0005": [98.50, 39.74],
    "0006": [118.68, 24.89],
    "0007": [125.32, 43.83],
    "0008": [113.84, 30.67],
    "0009": [104.41, 30.86],
    "0010": [112.46, 23.06],
    "0011": [113.32, 23.11],
    "0012": [119.92, 32.46],
    "0013": [120.25, 31.61],
    "0014": [113.33, 39.50],
    "0015": [106.38, 38.99],
    "0016": [107.38, 38.55],
    "0017": [113.39, 34.79],
    "0018": [103.84, 36.08],
    "0019": [117.21, 39.10],
    "0020": [109.01, 33.62],
    "0021": [129.52, 42.92],
    "0022": [122.82, 45.63],
    "0023": [123.40, 41.83],
    "0024": [111.77, 36.58],
    "0025": [116.96, 33.67],
    "0026": [82.97, 41.72],
    "0027": [109.61, 39.35],
    "0028": [126.54, 45.81],
    "0029": [84.88, 45.59],
    "0030": [117.95, 40.96],
    "0031": [121.61, 38.91],
    "0032": [112.73, 37.70],
    "0033": [117.39, 32.93],
    "0034": [117.26, 31.83],
    "0035": [122.96, 39.66],

};

var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i]["COMPANY"]];
        if (geoCoord) {
            res.push({
                name: data[i]["COMPANY"],
                value: geoCoord.concat(data[i]["DJYCS"], data[i]["GZPYCS"], data[i]["CZPYCS"], data[i]["QXYCS"], data[i]["DQGZYCS"])
            });
        }
    }
    return res;
};

option = {
    title: {
        text: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            var res = "<div style='width: 196px;border: 1px solid #737373;'><div style='width: 100%;height: 28px;background-color: #eee;border-bottom: 1px solid #dedede;'><span style='color: #010101;font-size: 12px;line-height: 28px;font-weight: bold;'>" + params.data.name + "分公司</span></div>";
            res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>DJ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[2] + "</div></div>";
            res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>GZ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[3] + "</div></div>";
            res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>CZ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[4] + "</div></div>";
            res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>QX异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[5] + "</div></div>";
            res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>DQ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[6] + "</div></div>";
            res += "</div></div>"
            return res
        },
        backgroundColor: "rgba(0,0,0,0)",
        borderWidth: 0
    },
    legend: {
        orient: 'vertical',
        left: '40',
        bottom: '40',
        data: ['正常', '异常'],
        textStyle: {
            color: '#666'
        },
        icon: 'circle',
        borderColor: '#aaa',
        borderWidth: 1,
        padding: 10,
        borderRadius: 6,
        backgroundColor: "#fff",
        itemWidth: 8,
        itemHeight: 8,
    },
    bmap: {
        center: [104.114129, 35.550339],
        zoom: 6,
        roam: true,
        mapStyle: {
            'styleJson': [{
                'featureType': 'water', //水
                'elementType': 'all',
                'stylers': {
                    'color': '#fff'
                }
            }, {
                'featureType': 'land', //土地
                'elementType': 'geometry',
                'stylers': {
                    'color': '#fff'
                }
            }, {
                'featureType': 'highway', //公路
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'local',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                        //								'color': '#000000'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'all',
                //							'elementType': 'geometry.fill',
                'stylers': {
                    'visibility': 'off'
                        //								'color': '#000000'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'geometry.stroke',
                'stylers': {
                    'color': '#08304b'
                }
            }, {
                'featureType': 'subway',
                'elementType': 'geometry',
                'stylers': {
                    'lightness': -70
                }
            }, {
                'featureType': 'building',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'all',
                'elementType': 'labels.text.fill',
                'stylers': {
                    'color': '#857f7f'
                }
            }, {
                'featureType': 'all',
                'elementType': 'labels.text.stroke',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'building',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#022338'
                }
            }, {
                'featureType': 'green',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#062032'
                }
            }, {
                'featureType': 'boundary',
                'elementType': 'all',
                'stylers': {
                    'color': '#465b6c'
                }
            }, {
                'featureType': 'manmade',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'label',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }]
        }
    },
    series: [{
        name: '正常',
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: convertData(data),
        symbolSize: 8,
        label: {
            normal: {
                formatter: '{b}',
                position: 'bottom',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: 'purple'
            }
        }
    }, {
        name: '异常',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 5)),
        symbolSize: 10,
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ff0000',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }]
};

function getYCdata(data) {
    var YCdata = []
    for (var i = 0; i < data.length; i++) {
        if ((data[i].DJYCS + data[i].GZPYCS + data[i].CZPYCS + data[i].QXYCS + data[i].DQGZYCS) > 0) {
            var geoCoord = geoCoordMap[data[i]["COMPANY"]];
            if (geoCoord) {
                YCdata.push({
                    name: data[i]["COMPANY"],
                    value: geoCoord.concat(data[i]["DJYCS"], data[i]["GZPYCS"], data[i]["CZPYCS"], data[i]["QXYCS"], data[i]["DQGZYCS"])
                });
            }
        }
    }
    return YCdata;
}

function getZCdata(data) {
    var ZCdata = []
    for (var i = 0; i < data.length; i++) {
        if ((data[i].DJYCS + data[i].GZPYCS + data[i].CZPYCS + data[i].QXYCS + data[i].DQGZYCS) == 0) {
            var geoCoord = geoCoordMap[data[i]["COMPANY"]];
            if (geoCoord) {
                ZCdata.push({
                    name: data[i]["COMPANY"],
                    value: geoCoord.concat(data[i]["DJYCS"], data[i]["GZPYCS"], data[i]["CZPYCS"], data[i]["QXYCS"], data[i]["DQGZYCS"])
                });
            }
        }
    }
    return ZCdata;
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
