First two bb
Cool is the first to admit that the title party, ha ha ha, refer to the official website of the development echart example, some styles do their own changes, it becomes a little geeks, get ready additionally used ajax json data in html, if you have then the interface can directly request interface!
The renderings
Where the bubble size and color are to show depending on the number of provinces, color can also adjust yourself as you think good-looking, dynamic ripple is radiation, do feel very low, official documents directly with the adjustment, there should be more handsome.
Code
Address: https://github.com/lightTrace/echart/tree/master/hotMap
All official documents have your code depends on, you can choose to view in browser in the idea directly open directly open hotmap.html can see the effect, directly open it is not enough, because the addition of the ajax call, or deployed to the above also nginx Row.
Passing through the point of a praise chant
hotmap.html briefly
<!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>
Found nothing to say, the code is very simple, there are comments, I wrote the main dish, please understand, at least to provide the official download files, ha ha ha, back under study might do a little cool.
