<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>
echarts实现飞机飞往各地
u0110138402024-05-05 20:34
相关推荐
永乐春秋38 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性鸽鸽程序猿40 分钟前
【前端】CSSggdpzhk41 分钟前
VUE:基于MVVN的前端js框架小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连活宝小娜5 小时前
vue不刷新浏览器更新页面的方法程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案