飞线图

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);

}

}