height:100%;
}
body{
height:100%;
margin:0;
padding:0;
background-color:#2F4056;
}
const xhr= newXMLHttpRequest();
xhr.open('get','https://geo.datav.aliyun.com/areas/bound/530000_full.json',true)
xhr.send(null)
xhr.onreadystatechange= () =>{if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
const data=JSON.parse(xhr.responseText);
console.log(Object.prototype.toString(data))
const coord= data.features.map(val =>{return{
name:val.properties.name,
value:val.properties.center
}
})
const lines_coord=[];
coord.forEach((v,index)=>{
index> 0 &&lines_coord.push({
coords:[v.value,coord[0].value]
})
})//地市取简称
data.features.forEach(v =>{
v.properties.name= v.properties.name.indexOf('版纳')>-1 ?v.properties.name.substr(0,4) : v.properties.name.substr(0,2);
})
echarts.registerMap('yns', data);
const option={
title: {
text:'云南省',
},
geo: {
map:'yns',
zlevel:10,
show:true,
layoutCenter: ['50%', '50%'],
roam:false,
layoutSize:"90%",
zoom:1,
label: {
normal: {
show:true,
textStyle:{
fontSize:12,
color:'#43D0D6'}
}
},
itemStyle: {
normal: {
color:'#062031',
borderWidth:1.1,
borderColor:'#43D0D6'}
},
emphasis: {
areaColor:'#FFB800',
label:{
show:false}
}
},
series: [
{
type:'effectScatter',
coordinateSystem:'geo',
zlevel:15,
symbolSize:8,
rippleEffect: {
period:4, brushType: 'stroke', scale: 4},
itemStyle:{
color:'#FFB800',
opacity:1},
data:coord.slice(1)
},
{
type:'effectScatter',
coordinateSystem:'geo',
zlevel:15,
symbolSize:12,
rippleEffect: {
period:6, brushType: 'stroke', scale: 8},
itemStyle:{
color:'#FF5722',
opacity:1},
data:coord.slice(0,1)
},
{
type:'lines',
coordinateSystem:'geo',
zlevel:15,
effect: {
show:true, period: 5, trailLength: 0, symbol: 'arrow', color:'#01AAED',symbolSize: 8,
},
lineStyle: {
normal: {width:1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}
},
data:lines_coord
}
]
}
chart.setOption(option);
chart.on('click', function(params) {
console.log(params);
});
}else{
alert(xhr.status);
}
}