先bb两句
首先承认酷炫是标题党，哈哈哈，参考了echart的官网开发示例，对一些样式做了自己的改动，变得稍微极客一点，另外在html中使用了ajax获取现成json数据，如果你有接口的话可以直接请求接口！
上效果图
其中气泡的大小和颜色都是根据各省不同的人数来展示，颜色还可以你自己调整成你认为好看的，波纹是动态的辐射，感觉做的很low，直接用的官方文档调整的，应该有更帅的。
代码
地址：https://github.com/lightTrace/echart/tree/master/hotMap
代码所依赖的全部官方文件都有的，可以在idea直接open in browser选择浏览器直接打开hotmap.html即可看到效果，直接打开是不行的，因为加入了ajax调用，或者部署到nginx上面也行。
走过路过的点个赞呗
hotmap.html简单说说
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<link rel="stylesheet" type="text/css"/>
<script src="gf-js/jquery.min.js"></script>
<script src="gf-js/echarts.js"></script>
<script src="gf-js/china.js"></script>
<style>#china-map {width:100%; height: 100%;margin: auto;}</style>
</head>
<body>
<div id="china-map"></div>
<script>
var province = "河北省、山西省、辽宁省、吉林省、黑龙江省、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、海南省、四川省、贵州省、云南省 、陕西省 、甘肃省、青海省、台湾省、西藏自治区、广西壮族自治区、内蒙古自治区、宁夏回族自治区、新疆维吾尔自治区、北京市、上海市、天津市、重庆市、香港、澳门"
var ajaxReqs = null;
function reqs() {
if(ajaxReqs !== null) {
ajaxReqs.abort();
ajaxReqs = null;
}
var data=[]
var geoCoordMap={}
var max = 0,
min = 1000; // min,max为了自动计算出人数最多的省和最小的省从而自动分配颜色
var maxSize4Pin = 55,
minSize4Pin = 35;
$.ajax({
type : "GET",
// url : "http://192.168.2.184:9001/collect/region",
url:"./data.json",
async: false,
dataType : "json",
cache:false,
success : function (datas) {
list = datas.data.list
$.each(list, function (i, item) {
if(province.indexOf(item.region)!=-1)
{
if(max < item.activityNumber){
max = item.activityNumber
}
if(min > item.activityNumber){
min = item.activityNumber
}
data.push({
name: item.region,
value: item.activityNumber
})
var point = []
point.push(item.lng, item.lat)
geoCoordMap[item.region]=point
}
});
}
});
console.log(min)
console.log(max)
$('#china-map').width($('#china-map').width());
$('#china-map').height($('#china-map').width());
var myChart = echarts.init(document.getElementById('china-map'));
var name_title = ''
var subname = ''
var nameColor = '#2880fc'
var name_fontFamily = '宋体'
var subname_fontSize = 15
var name_fontSize = 25
var mapName = 'china'
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
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;
};
option = {
backgroundColor: 'rgba(29, 52, 108, 1)',
title: {
text: name_title,
subtext: subname,
x: 'left',
y:'200px',
textStyle: {
color: nameColor,
fontFamily: name_fontFamily,
fontSize: name_fontSize
},
subtextStyle:{
fontSize:subname_fontSize,
fontFamily:name_fontFamily
}
},
visualMap: {
show: false,
min: min,
max: max,
left: 'left',
top: 'bottom',
color: '#b70d05',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#00467F', '#A5CC82','#c3fc0a','#fca80d', '#cc0529'] // 地图不同省份填充的颜色
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true, //地图是否可以缩放
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#00effc',
},
emphasis: {
areaColor: '#2B91B7',
}
},
regions: [
{
name: '南海诸岛',
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}
]
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return 1;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'effectScatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
effectType: 'ripple',
animation: true,
rippleEffect: {
period: 5,
scale: 1.5,
brushType: 'stroke'
},
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]}', //这里加这个是防止echart地图加载数据加载气泡的数值加载成纬度，这个bug很尴尬
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
]
};
myChart.setOption(option);
}
reqs();
setInterval(reqs, 3000);
</script>
</body>
</html>
发现没什么好说的，代码很简单，注释也有，主要我写的菜，请大家谅解，起码提供了官方下载文件，哈哈哈，后面学习下可能会做一点更酷的。
