Echarts地图气泡显示不同区域数据

完成效果图

; "复制代码")

var data=[{"name":"耒阳市","value":762},{"name":"衡东县","value":738},{"name":"雁峰区","value":3891},{"name":"衡山县","value":232},{"name":"石鼓区","value":3240},{"name":"蒸湘区","value":2512},{"name":"衡阳县","value":922},{"name":"祁东县","value":219},{"name":"珠晖区","value":3229},{"name":"南岳区","value":67},{"name":"衡南县","value":739},{"name":"常宁市","value":545}]; //获取衡阳市的地图信息
function GetGeoMap() { var geoJson = null; var url = "/js/430400_full.json";

MapChart.showLoading();
$.get(url, null, function (ret) {
    geoJson = ret;
    loadMap(geoJson); // $.getJSON(uploadedDataURL, function(geoJson) {

});
} //初始化地图容器
var MapChart = echarts.init(document.getElementById('main')); //设置地图。
var loadMap = function (geoJson) {

echarts.registerMap('tianjin', geoJson);
MapChart.hideLoading(); var data = MapMarkLine; var xData = []; for (var i = 0; i < data.length; i++) {
    xData.push(data[i].value);
} var geoCoordMap = { '珠晖区': [112.626324,26.891063], '雁峰区': [112.612241,26.893694], '石鼓区': [112.607635,26.903908], '蒸湘区': [112.570608,26.89087], '南岳区': [112.734147,27.240536], '衡阳县': [112.379643,26.962388], '衡南县': [112.677459,26.739973], '衡山县': [112.86971,27.234808], '衡东县': [112.950412,27.083531], '祁东县': [112.111192,26.787109], '耒阳市': [112.847215,26.414162], '常宁市': [112.396821,26.406773],
}
xData.sort(function (a, b) { return a - b;
}); var min = xData[0], max = xData[xData.length - 1]; var maxSize4Pin = 100, minSize4Pin = 20; 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 = {
    title: {
        text: '投资人员分布',
        subtext: '1,2803人',
        x: 'left',
        textStyle: {
            color: '#fff',
            fontSize:13 },
        subtextStyle: {
            color: '#ff9c00',
            fontSize:22 }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) { if (typeof (params.value)[2] == "undefined") { return params.name + ' : ' + params.value;
            } else { return params.name + ' : ' + params.value[2];
            }
        }
    }, // legend: {
    // orient: 'vertical',
    // y: 'bottom',
    // x: 'right',
    // data: ['credit\_pm2.5'],
    // textStyle: {
    // color: '#fff'
    // }
    // },

visualMap: {

        show: true,
        type: 'piecewise',
        pieces: [
            { min: 2000 },
            { min: 1000, max: 1999, },
            { min: 100, max: 999 },
            { max: 99 }, // {min:0,max: 2000},
            // {max:100}// 不指定 min，表示 min 为无限大（-Infinity）。

],

        showLabel: true,
        right: '5%',
        bottom: '10%',
        text: [''], // 文本，默认为数值文本

textStyle: {

            color: '#7B93A7' },
        calculable: true,
        seriesIndex: [1],
        inRange: {
            color: ['#f6e294', '#FFABA6', '#FC6258', '#FA3225']
        }
    },
    geo: {
        show: true,
        map: 'tianjin',
        label: {
            normal: {
                show: false },
            emphasis: {
                show: false,
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#031525',
                borderColor: '#fff',
                borderWidth: 2,
            },
            emphasis: {
                areaColor: '#56ddff', //鼠标放上去的亮色

}

        }
    },
    series: [
        {
            name: 'credit\_pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) { //var a = (maxSize4Pin - minSize4Pin) / (max - min);
                //var b = minSize4Pin - a * min;
                //b = maxSize4Pin - a * max;
                //return a * val[2] + b;
                return 15;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true },
                emphasis: {
                    show: true }
            },
            itemStyle: {
                normal: {
                    color: '#FBE805',
                    areaColor: '#FBE805',
                    borderColor: '#FBE805',
                },
                emphasis: {
                    areaColor: '#FBE805' }
            },

        },
        {
            type: 'map',
            map: 'tianjin',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示

label: {

                normal: {
                    show: false },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff' }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7' }
            },
            animation: false,
            data: data
        },
        {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            data: convertData(data),
            symbolSize: function (val) { var a = (maxSize4Pin - minSize4Pin) / (max - min); var b = minSize4Pin - a * min;
                b = maxSize4Pin - a * max; return a * val[2] + b;//计算并返回气泡大小

},

            label: {
                normal: {
                    show: true,
                    formatter: '{@[2]}',//将集合中序号为2的显示在气泡上，默认为1{x,y,val}

textStyle: {

                        color: '#fff',//文字颜色
                        fontSize: 9,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#5d2bb5', //标志颜色

}

            },
            zlevel: 6,
           
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) { return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) { //var a = (maxSize4Pin - minSize4Pin) / (max - min);
                //var b = minSize4Pin - a * min;
                //b = maxSize4Pin - a * max;
                //return a * val[2] + b;
                return 15;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke' },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true }
            },
            itemStyle: {
                normal: {
                    color: '#fbe903',
                    shadowBlur: 10,
                    shadowColor: '#dece00' }
            },
            zlevel: 1 },

    ]
};

MapChart.setOption(option);
GetUserCountByAre("");

}