Echarts map bubbles show data from different regions

Posted Jun 16, 20204 min read

Complete renderings

Copy code ; "Copy code")

var data=[{"name":"Leiyang City","value":762},{"name":"Hengdong County","value":738},{"name":"Yanfeng District ","value":3891},{"name":"Hengshan County","value":232},{"name":"Shigu District","value":3240},{"name":" Steamed Xiang District","value":2512},{"name":"Hengyang County","value":922},{"name":"Qidong County","value":219},{"name ":"Zhuhui District","value":3229},{"name":"Nanyue District","value":67},{"name":"Hengnan County","value":739}, {"name":"Changning City","value":545}]; //Get map information of Hengyang City
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) {

});
} //Initialize the map container
var MapChart = echarts.init(document.getElementById('main')); //Set the map.
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 = {'Zhuhui District':\[112.626324,26.891063\],'Yanfeng District':\[112.612241,26.893694\],'Shigu District':\[112.607635,26.903908\],'Steamed Xiang District':\[112.570608,26.89087\],'Nanyue District':\[112.734147,27.240536\],'Hengyang County':\[112.379643,26.962388\],'Hengnan County':\[112.677459,26.739973\],'Hengshan County':\[112.86971,27.234808\],'Hengdong County':\[112.950412,27.083531\],'Qidong County':\[112.111192,26.787109\],'Leiyang City':\[112.847215,26.414162\],'Changning City':\[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:'Investment staff distribution',
        subtext:'1,2803 people',
        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}//If min is not specified, min is infinite(-Infinity).

],

        showLabel:true,
        right:'5%',
        bottom:'10%',
        text:\[''\], //text, default is numeric 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', //bright color on mouse up

}

        }
    },
    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, //Aspect ratio
            showLegendSymbol:false, //display when legend exists

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:'point',
            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;//Calculate and return the bubble size

},

            label:{
                normal:{
                    show:true,
                    formatter:'{@\[2\]}',//Display the number 2 in the collection on the bubble, the default is 1{x,y,val}

textStyle:{

                        color:'#fff',//Text color
                        fontSize:9,
                    }
                }
            },
            itemStyle:{
                normal:{
                    color:'#5d2bb5', //Mark color

}

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

}