Los dos primeros bb
Cool es el primero en admitir que el partido del título, ja, ja, consulte el sitio web oficial del ejemplo de desarrollo Echart, algunos estilos hacen sus propios cambios, se vuelve un poco frikis, obtener datos ajax JSON, además, usados listos en html, si usted tiene a continuación, la interfaz puede solicitar directamente la interfaz!
las representaciones
Cuando el tamaño de las burbujas y el color son para mostrar en función del número de provincias, color también se puede ajustar a sí mismo como piensa bien parecido, ondulación dinámica es la radiación, me siento muy baja, documentos oficiales directamente con el ajuste, no debería haber más guapo.
código
Dirección: https://github.com/lightTrace/echart/tree/master/hotMap
Todos los documentos oficiales tienen su código depende, puede optar por ver en el navegador en la idea de abrir directamente hotmap.html abrir directamente puede ver el efecto, directamente abrirlo no es suficiente, ya que la adición de la llamada AJAX, o desplegado a lo anterior también nginx la línea.
Pasando a través de la punta de un canto elogio
brevemente 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>
encontrado nada que decir, el código es muy simple, hay comentarios, escribí el plato principal, por favor, comprenda, por lo menos para proporcionar los archivos de descarga oficiales, ja ja ja, de nuevo bajo estudio podría hacer un poco de frío.
