<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
相关推荐
别拿曾经看以后~6 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击我要洋人死9 分钟前
导航栏及下拉菜单的实现川石课堂软件测试12 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台科技探秘人21 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好科技探秘人21 分钟前
Chrome与傲游浏览器性能与功能的深度对比JerryXZR27 分钟前
前端开发中ES6的技术细节二七星静香29 分钟前
laravel chunkById 分块查询 使用时的问题q24985969332 分钟前
前端预览word、excel、ppt小华同学ai37 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器problc42 分钟前
Flutter中文字体设置指南:打造个性化的应用体验