<html lang="en"><head>
<meta charset="UTF-8">
<title>echarts世界地图闪烁点 www.bootstrapmb.com</title>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="world.js"></script>
</head>
<body>
<div id="main" style="width: 100%; height: 120vh; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1679549415768"><div style="position: relative; overflow: hidden; width: 1870px; height: 1115px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;"><canvas data-zr-dom-id="zr_0" width="1870" height="1115" style="position: absolute; left: 0px; top: 0px; width: 1870px; height: 1115px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas data-zr-dom-id="zr_2" width="1870" height="1115" style="position: absolute; left: 0px; top: 0px; width: 1870px; height: 1115px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
<script>var chart =echarts.init(document.getElementById("main"));var geoCoordMap ={北京:[116.28,39.54],重庆:[107.7539,30.1904],上海:[121.4648,31.2891],尼日利亚:[-4.388361,11.186148],洛杉矶:[-118.24311,34.052713],香港:[114.195466,22.282751],芝加哥:[-87.801833,41.870975],加纳库马西:[-4.62829,7.72415],曼彻斯特:[-1.657222,51.886863],汉堡:[10.01959,54.38474],阿拉木图:[45.326912,41.101891],伊尔库茨克:[89.116876,67.757906],巴西:[-48.678945,-10.493623],埃及:[31.815593,31.418032],巴塞罗纳:[2.175129,41.385064],柬埔寨:[104.88659,11.545469],米兰:[9.189948,45.46623],蒙得维的亚:[-56.162231,-34.901113],莫桑比克:[32.608571,-25.893473],阿尔及尔:[3.054275,36.753027],阿联酋迪拜:[55.269441,25.204514],布达佩斯:[17.108519,48.179162],悉尼:[150.993137,-33.675509],加州:[-121.910642,41.38028],墨尔本:[144.999416,-37.781726],墨西哥:[-99.094092,19.365711],温哥华:[-123.023921,49.311753]
};var BJData =[[{name:"北京",value:12580
}],[{name:"重庆",value:10000000
}],[{name:"上海",value:9100
}],[{name:"尼日利亚",value:9100
}],[{name:"洛杉矶",value:2370
}],[{name:"香港",value:3130
}],[{name:"芝加哥",value:2350
}],[{name:"加纳库马西",value:5120
}],[{name:"曼彻斯特",value:3110
}],[{name:"汉堡",value:6280
}],[{name:"阿拉木图",value:7255
}],[{name:"伊尔库茨克",value:8125
}],[{name:"巴西",value:3590
}],[{name:"埃及",value:3590
}],[{name:"巴塞罗纳",value:3590
}],[{name:"柬埔寨",value:3590
}],[{name:"米兰",value:3590
}],[{name:"蒙得维的亚",value:3590
}],[{name:"莫桑比克",value:3590
}],[{name:"阿尔及尔",value:31590
}],[{name:"阿联酋迪拜",value:13590
}],[{name:"布达佩斯",value:23590
}],[{name:"悉尼",value:3590
}],[{name:"加州",value:3590
}],[{name:"墨尔本",value:3590
}],[{name:"墨西哥",value:3590
}],[{name:"温哥华",value:3590
}]];var series =[];[[,BJData]].forEach(function (item,i) {series.push({type:"effectScatter",coordinateSystem:"geo",zlevel:2,rippleEffect:{period:4,brushType:"stroke",scale:4
},label:{normal:{show:true,position:"right",offset:[5,0],formatter:"{b}"
},emphasis:{show:true
}
},symbol:"circle",symbolSize:function (val) {var level =0 ;var state=Math.floor(val[2]/5000) ;switch (state)
{case 0:level=0;break;case 1:level=1;break;case 2:level=2;break;case 3:level=3;break;case 4:level=4;break;case 5:level=5;break;case 6:level=6;break;case 7:level=7;break;case 8:level=8;break;case 9:level=9;break;default:level=10;}
return 5 + level;},data:item[1].map(function (dataItem) {return {name:dataItem[0].name,value:geoCoordMap[dataItem[0].name]
.concat([dataItem[0].value])
};})
});});option ={backgroundColor:'#000',tooltip:{trigger:"item",backgroundColor:"#1540a1",borderColor:"#FFFFCC",showDelay:0,hideDelay:0,transitionDuration:0,formatter:function (params,ticket,callback) {var res ="";var name =params.name;var value =params.value[params.seriesIndex + 1];res ="<span style='color:#fff;'>" + name.toString().split(' ')[0]
+ "</span><br/>爬虫：" + name.toString().split(' ')[1];return res;}
},visualMap:{min:0,max:10000,text:['High','Low'],show:false,calculable:true,color:['orangered','yellow','lightskyblue']
},geo:{map:"world",label:{emphasis:{show:false
}
},roam:true,layoutCenter:["50%","50%"],layoutSize:"180%",itemStyle:{normal:{color:["#04284e"],borderColor:"#5bc1c9"
},emphasis:{color:"rgba(37, 43, 61, .5)"
}
}
},series:series
};chart.setOption(option);</script>
</body></html>
