<script>
import * as echarts from 'echarts';
import datajson from '../../assets/world.json'
echarts.registerMap('world',datajson)
export default {
name: 'ecahrts',
data () {
return {
opt:{
backgroundColor:'transparent',
geo:{
map:"world",
roam:true,
zoom:1.3,
label:{
emphasis:{
show:false
}
},
itemStyle:{ //地图正常和鼠标
normal:{
areaColor:"#16213e",
borderColor:"#5b66a1",
},
emphasis:{
areaColor:"#2a333d"
}
},
regions:[
{
name:'China', //中国地图样式
itemStyle:{
normal:{
opacity:0.4,
borderColor:"#ffd591",
borderWidth:3,
areaColor:"#485377",
}
}
}
]
}
}
}
},
mounted () {
var series = [
{
name:'track',
type:'effectScatter',
coordinateSystem:'geo',
zlevel:2,
rippleEffect:{
brushType:'stroke'
},
label:{
normal:{
show:true,
position:'right',
formatter:'{b}'
}
},
symbolSize:15,
itemStyle:{
normal:{
color:"#a6c84c"
}
},
data:trackData.map(function(dataItem){
return {
name:dataItem[1].name,
value:geoData[dataItem[1].name].concat(dataItem[1].icon)
}
}),
symbol:function(val){
return "image://./static/images/"+val[2]
}
},{
name:'track',
type:'lines',
zlevel:2,
effect:{
show:true,
period:6,
trailLength:0,
symbol:'image://./static/images/飞机(1).png',
symbolSize:15
},
lineStyle:{
color:'#a6c84c',
width:1,
opacity:0.5,
curveness:0.3
},
data:this.CoverData(trackData)
}
]
this.opt.series = series
var chart = echarts.init(document.getElementById("ecahts"))
chart.setOption(this.opt)
},
methods:{
CoverData(data){
var arr= [ ]
data.forEach(item=>{
var fromData = geoData[item[0].name]
var toData = geoData[item[1].name]
if(fromData&&toData){
arr.push({
coords:[fromData,toData]
})
}
})
return arr;
}
},
watch:{
}
}
</script>
</style>
