本文主要是介绍echarts结合高德api(amap)做散点和迁徙图Vue，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

p.s.网上高德结合echarts资源太少了，一整还得交学费下载-。-，本着前人栽树后人乘凉的高尚品德，把我实现的免费版放出来，希望我的这篇文章可以满足广大伸手党（我也是）复制即用的心态，毕竟这也不涉及啥高深原理，满足工作所需就足够了。

效果图

步骤

1. 首先你得有高德api的key 传送门：lbs.amap.com/api/android…
2. 现在vue里引入高德地图 这里我要絮叨几句，网上引入高德有很多方法，有npm下vue-amap包的还有别的，我觉得挺费劲的还得去main.js里面配置，我用的直接在index.html里面引入script脚本的方式(方便复制粘贴)。
   <script src="//webapi.amap.com/maps?v=1.4.15&key=这里面填你申请的key&plugin=AMap.CustomLayer"></script>
   使用方法：复制上面这段script标签，双击这里面填你申请的key选中删除，换成你自己申请的key。然后将标签粘贴到你vue项目中public文件夹下有个index.html中第九行（如果你没有引入其他东西的话）

3. 下载echarts 下载完别忘记在main.js中引入import echarts from 'echarts' ，同时全局注册一下Vue.prototype.$echarts = echarts;

完成以上几步你以为就完事了嘛？不不不这只是开始（狗头）

重点：npm i echarts-extension-amap 然后在main.js中引入一下import 'echarts-extension-amap'

下载这个包 不要相信网上什么echarts-amap或者amap-echarts或者什么要你花钱买amap.js这个文件的，都是骗子！骗子！老子画这么多年页面都是白嫖，竟然想让老子花钱？门都没有。

完成以上上面的步骤实际上就成功了一半了，接下来开始封装组件吧。

<template>
  <div id="111" style="width:100%;height:100%"></div>
</template>
<script>
export default {
  props: {
  //这个是地图中心点的坐标哈 写props里方便改，写data里也行。不用非得跟我一样。
    center: {
      type: Array,
      default: () => {
        return [113.74947682142859, 22.835607857142858];
      }
    }
  },
    mounted() {
        this.initMap()
    },
  methods: {
    initMap() {
      const option = {
        //amap地图配置
        amap: {
          center: this.center,
          resizeEnable: true,
          mapStyle: "amap://styles/whitesmoke",//地图样式白色
          rotation: 10,
          zoom: 10,//缩放
          viewMode: "3D",//是否启用3d地图
          pitch: 35, //视角高度
          skyColor: "#33216a"
        },
        animation: true,
        series: [
          //散点图层
          {
            type: "scatter",
            zlevel: 2,
            // 使用高德地图坐标系
            coordinateSystem: "amap",
            // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
            data:[] , //数据格式[y,x,name]
            symbolSize: 5, //小点的大小
            encode: {
              //维度
              value: 2
            },
            label: {
              normal: {
                formatter: "{@[2]}", //title提示的文字@后为索引
                position: "right", //显示位置
                show: false
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#00c1de" //颜色
              }
            }
          },
          //攻击线图层
          {
            type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 5,
              trailLength: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                  let data = params.data;
                  return `从${data.fromName}到${data.endName}`;
                },
                position: "right", //显示位置
                show: false
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: //数据格式[
        {
          fromName: "111",
          endName: "222",
          coords: [
            [坐标, 坐标, 名称],
            [坐标, 坐标, 名称]
          ]
        },
          },
          //攻击线图层2
          {
            type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 5,
              trailLength: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                  let data = params.data;
                  return `从${data.fromName}到${data.endName}`;
                },
                position: "right", //显示位置
                show: false
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: //和攻击线图层1的数据格式一样
          }
        ]
      };
      var chart = this.$echarts.init(document.getElementById('111'));
      chart.setOption(option);
      // get amap instance
      var amap = chart
        .getModel()
        .getComponent("amap")
        .getAMap();
      // operations below are the same as amap
      //   amap.addControl(new AMap.Scale());
      //   amap.addControl(new AMap.ToolBar());
      // add layers
      //   var satelliteLayer = new AMap.TileLayer.Satellite();//卫星图层
      //   var roadNetLayer = new AMap.TileLayer.RoadNet();//道路图层
      //   amap.add([satelliteLayer, roadNetLayer]);
    }
  }
};
</script>
复制代码

每一个图层的数据自己模拟一下，格式都写在注释里了。你要是复制粘贴跑不起来报错了也可以评论问我一下。

这篇关于echarts结合高德api(amap)做散点和迁徙图Vue的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！