效果图如下：
实现大致思路：
引入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...");
}
})
}