我的视频1.gif

推荐echarts官方文档阅读理解后。。。

var data = [
     {name: '1小区', value: 175},
     {name: '2小区', value: 135},
     {name: '3小区', value: 125},
     {name: '4小区', value: 175},
     {name: '5小区', value: 195},
     {name: '6小区', value: 115},
     {name: '7小区', value: 135},
     {name: '8小区', value: 115},

     {name: '9小区', value: 177},
     {name: '10小区', value: 163},
     {name: '11小区', value: 194},
     {name: '12小区', value: 229}
    ];
var geoCoordMap = {
    
    '1小区':[116.69,23.39],
    '2小区':[117.000,23.420],
    '3小区':[116.540,23.38],
    '4小区':[116.622,23.36],
    '5小区':[116.545,23.34],
    '6小区':[116.389,23.32],
    '7小区':[116.333,23.22],
    '8小区':[116.711,23.26],
    '9小区':[116.555,23.25],
    '10小区':[117.1097,23.450],
    '11小区':[116.486,23.19],
    '12小区':[116.645,23.28]
};
var mapjson ={} //此处是getjson地图json数据 想获取全国各地市区县json数据请联系本人
echarts.registerMap('mymap', mapjson);
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

var option = {
    //backgroundColor: '#6F7681',
    title: {
        // text: '',
        subtext: 'XX市XX成功率',
        //sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#323c48'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['成功率'],
        textStyle: {
            color: '#323c48'
        }
    },
    geo: {
        map: 'mymap',
        zoom:1,
        label: {
            emphasis: {
                show: true
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d',
                label:{
                        show:true,
                        color:'red',
                        textStyle: {
                            // fontWeight:'bold',
                             color: "#fff"
                        }
                }
            }
        }
    },
    series : [
        {
            name: '成功率',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{a}{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{a}{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};
echarts.init(document.getElementById('yourdomid')).setOption(option)