echarts实现飞机飞往各地

复制代码
<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>

Cockos Incorporated | LICEcap

相关推荐
信创DevOps先锋几秒前
本土化突围:Gitee如何重新定义企业级项目管理工具价值
前端·gitee·jquery
圣光SG12 分钟前
Java类与对象及面向对象基础核心详细笔记
java·前端·数据库
Jinuss21 分钟前
源码分析之React中的useImperativeHandle
开发语言·前端·javascript
ZC跨境爬虫34 分钟前
CSS核心知识点与定位实战全解析(结合Playwright爬虫案例)
前端·css·爬虫
Jinuss35 分钟前
源码分析之React中的forwardRef解读
前端·javascript·react.js
mengsi5538 分钟前
Antigravity IDE 在浏览器上 verify 成功但本地 IDE 没反应 “开启Tun依然无济于事” —— 解决方案
前端·ide·chrome·antigravity
南风知我意9571 小时前
JavaScript 惰性函数深度解析:从原理到实践的极致性能优化
开发语言·javascript·性能优化
Можно1 小时前
pages.json 和 manifest.json 有什么作用?uni-app 核心配置文件详解
前端·小程序·uni-app
hzhsec1 小时前
钓鱼邮件分析与排查
服务器·前端·安全·web安全·钓鱼邮件