高德地图+echarts实现飞线图

下面是vue实现：

前期准备：

引入amap、echarts、echarts-amap依赖，vue的话需要npm安装一下
By using script tag

    <!--引入高德地图JSAPI -->
    	    <script src="//webapi.amap.com/maps?v=1.4.15&key=ab99f68b8f9eac7a5287f4043493e2db&plugin=AMap.CustomLayer"></script>
    	    <!--引入UI组件库（1.0版本） -->
    	    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
    	
    
    	    <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
    	    <script src="echarts-amap.js"></script>

By using import in main.js（示例）

    import echarts from 'echarts'
    Vue.prototype.$echarts=echarts

By using webpack

    require('echarts-amap');

开始操作

    <template>
      <div class="content-box">
        <!-- 通过vue的ref获取节点，方便初始化 -->
        <!-- echart容器div必须设置高度，否则不显示 -->
        <div ref="echart" style="height:745px;"></div>
      </div>
    </template>
    
    
    <script>
    export default {
      mounted() {
        this.$nextTick(() => {
          this.initEchart();
        });
      },
      methods: {
        initEchart() {
          // 获取DOM节点并初始化
          let chart = this.$echarts.init(this.$refs.echart);
          // 编写echart参数
          let option = {
            amap: {
              zoom: 10,
              zooms: [3, 20],
              mapStyle: 'amap://styles/darkblue', // 地图主题
              center: [110, 33], // 中心点
              lang: 'en',
              resizeEnable: true
            },
            animation: false,
            series: []
            tooltip: { return: 'shanghai' }
          };
          // 设置图表的参数
          chart.setOption(option);
        }
      }
    };
    </script>

再在series里设置想要的飞线效果就可以了可以设置圆点，轨迹和轨迹路上闪动的线，参照echarts文档即可

html实现：

其实也很好理解，就是初始化echarts和amap渲染到div就可以
贴一个我参照的博客
参照博客地址http://blog.sqber.com/articles/echarts-with-gaode-map.html
如果想实现多条飞线的话可以自己设置对象从数据库传也可以在series配置项中的data数组中多放几个值