<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
相关推荐
Cachel wood6 分钟前
python round四舍五入和decimal库精确四舍五入学代码的小前端7 分钟前
0基础学前端-----CSS DAY9joan_8512 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接还是大剑师兰特34 分钟前
什么是尾调用,使用尾调用有什么好处?m0_7482361143 分钟前
Calcite Web 项目常见问题解决方案Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南m0_748235611 小时前
从零开始学前端之HTML(三)一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具