echarts地图散点高亮弹框制作

效果图如下：

实现大致思路：

引入echarts最新版本，还有china.json,以及地级市坐标，（因为产品需求中不考虑省份，只考虑各个地级市），echarts官网已经不让下载地图了，网上很多地级市坐标不全，格式又不是想要的，没办法只能自己整理了；地级市坐标会放在下一篇文章中；

var bg_echarts_map = echarts.init(document.getElementById('bg_echarts_map')); //地图

//获取地图相关数据

function getMapData(){

$.ajax({

url: '/assets/statuserpercity',

type: 'get',

data: { },

success: function (res) {

var res = typeof res == 'object' ? res : JSON.parse(res);

if (res.result == 1) {

var arr = [];

if(res.data){

   var cityData = res.data.data.statUserPerCity;

   for(var i in cityData){

       arr.push({

                                        name: cityData[i].city.replace(/市/g, '').replace(/辖区/g, '').replace(/地区/g, ''),

                                        value: cityData[i].uv,

id: cityData[i].cityId,

                                    });

                                }

setMap(arr);

cityAllData = arr;

                             }

}

},

error: function (res) {

console.log(res);

}

})

}

 

//地图

            function setMap(data) {

             var cityObj = [];

var sum = 0;

             for(var i in cityJson ){

             cityObj.push({name: cityJson[i].properties.name ,cp: cityJson[i].properties.cp});

             }

for (var i = 0; i < data.length; i++) {

for(var j = 0; j < cityObj.length; j++){

if(data[i].name == cityObj[j].name){

sum += data[i].value;

}

}

}

var convertData = function (data) {

var res = [];

for (var i = 0; i < data.length; i++) {

for(var j = 0; j < cityObj.length; j++){

if(data[i].name == cityObj[j].name){

var geoCoord = cityObj[j].cp;

if (geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value),

});

}

}

}

}

return res;

};

var optionMap = {

tooltip:{

padding: 0,

enterable:true,

transitionDuration:1,

textStyle : {

color: '#000',

decoration: 'none',

},

formatter: function () {

var tipHtml = '';

if(tootilpData.probeRtUserInfo){

tipHtml = ' <div class="tooltip" style="word-wrap:break-word; white-space:pre-wrap !important;">'+

'<div class="horn">'+

'<div class="lt"></div>'+

'<div class="rb"></div>'+

'</div>'+

'<div class="phoneData">'+'用户'+tootilpData.probeRtUserInfo.phone+'在'+tootilpData.probeRtUserInfo.address+'联网成功</div>'+

'</div>';

}

if(tootilpData.wiproRtUserInfo){

tipHtml = ' <div class="tooltip">'+

'<div class="horn">'+

'<div class="lt"></div>'+

'<div class="rb"></div>'+

'</div>'+

'<div class="imgData">'+

'<img class="tooltip_img" src='+tootilpData.wiproRtUserInfo.picId+'>'+

' <div class="tooltip_text">'+

'<span class="tooltip_text_span"><i>'+tootilpData.wiproRtUserInfo.gender+'</i>，<i>'+tootilpData.wiproRtUserInfo.age+'岁</i></span>'+

'<span class="tooltip_text_span2">到达'+tootilpData.wiproRtUserInfo.city+'的'+tootilpData.wiproRtUserInfo.shopName+'</span>'+

'</div>'+

'</div>'+

'</div>';

}

return tipHtml;

}

},

geo: {

map: 'china',

show: true,

roam: false,

layoutCenter: ['50%','50%'],

layoutSize: '127%',

label: {

emphasis: {

show: false

}

},

itemStyle: {

normal: {

areaColor: 'transparent',

borderColor: '#0266b4',

shadowColor: '#0266b4',

shadowBlur: 20

},

},

emphasis: {

itemStyle: {

areaColor: 'transparent',

}

},

},

series: [

{

name: '前30',

type: 'effectScatter',

coordinateSystem: 'geo',

hoverAnimation: false,

legendHoverLink: false,

data: convertData(data.sort(function (a, b) {

return b.value - a.value;

}).slice(0, 31)),

symbolSize: function (val) {

return val[2] / sum * 300

},

showEffectOn: 'render',

rippleEffect: {

brushType: 'stroke'

},

itemStyle: {

normal: {

color: '#2fb6a5',

shadowBlur: 10,

shadowColor: '#31b8a6'

},

emphasis: {

show: false,

color: '#03FCDE'

}

},

zlevel: 0,

silent: true,

},

{

name: '城市',

type: 'scatter',

coordinateSystem: 'geo',

zoom: 2,

data: convertData(data),

legendHoverLink: false,

symbolSize: function (val) {

var a = val[2] / sum * 300;

if(a < 5){

a=5;

}

return a;

},

itemStyle: {

normal: {

color: '#2fb6a5',

},

emphasis: {

show: false,

color: '#03FCDE'

}

},

zlevel: 1,

silent: true,

},

]

};

bg_echarts_map.setOption(optionMap, true);

 

            }

 

//获取弹框气泡数据

function getAlertData (data){

$.ajax({

url: '/assets/wiprortuserinfo',

type: 'get',

async: false,

data: { },

success: function (res) {

var res = typeof res == 'object' ? res : JSON.parse(res);

if (res.result == 1) {

var apData = res.data;

if(apData){

if(apData.data.probeRtUserInfo){

apData.data.probeRtUserInfo.phone = apData.data.probeRtUserInfo.phone ? apData.data.probeRtUserInfo.phone.substr(0,3)+"****"+apData.data.probeRtUserInfo.phone.substr(7) : apData.data.probeRtUserInfo.phone;

apData.data.probeRtUserInfo.address = apData.data.probeRtUserInfo.city+'的'+apData.data.probeRtUserInfo.shopName;

apData.data.probeRtUserInfo.address = apData.data.probeRtUserInfo.address.length > 19 ? apData.data.probeRtUserInfo.address.substring(0,19)+'...' : apData.data.probeRtUserInfo.address;

tootilpData = apData.data;

}

if(apData.data.wiproRtUserInfo){

apData.data.wiproRtUserInfo.gender = apData.data.wiproRtUserInfo.gender == 'f' ? '女' : '男';

tootilpData = apData.data;

}

for(var i in data){

if(apData.data.probeRtUserInfo){

if(data[i].id == apData.data.probeRtUserInfo.cityId){

dataIndex = i;

}

}

if(apData.data.wiproRtUserInfo){

if(data[i].id == apData.data.wiproRtUserInfo.cityId){

dataIndex = i;

}

}

}

if(dataIndex !== null){

bg_echarts_map.dispatchAction({

type: 'downplay',

seriesIndex: 1,

});

bg_echarts_map.dispatchAction({

type: 'highlight',

seriesIndex: 1,

dataIndex: dataIndex

});

bg_echarts_map.dispatchAction({

type: 'hideTip',

seriesIndex: 1,

});

bg_echarts_map.dispatchAction({

type: 'showTip',

seriesIndex: 1,

dataIndex: dataIndex

});

}

}else{

bg_echarts_map.dispatchAction({

type: 'downplay',

seriesIndex: 1,

});

bg_echarts_map.dispatchAction({

type: 'hideTip',

seriesIndex: 1,

});

}

}

},

error: function (res) {

console.log("error...");

}

})

}