<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
相关推荐
索然无味io32 分钟前
XML外部实体注入--漏洞利用ThomasChan1231 小时前
Typescript 多个泛型参数详细解读爱学习的狮王1 小时前
ubuntu18.04安装nvm管理本机node和npm东锋1.31 小时前
使用 F12 查看 Network 及数据格式zhanggongzichu1 小时前
npm常用命令anyup_前端梦工厂1 小时前
从浏览器层面看前端性能:了解 Chrome 组件、多进程与多线程zzlyx991 小时前
.NET 9 微软官方推荐使用 Scalar 替代传统的 Swaggerchengpei1471 小时前
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确Bunury1 小时前
组件封装-List我命由我123452 小时前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js