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("");
}