echarts+百度地图，实现坐标打点+飞线图

echarts+百度地图，实现坐标打点+飞线图，先上效果图

 再接全部代码

<template>
  <div class="container">
        <div id="map2" style="height: 1000px;width: 100%;">
      <baidu-map @ready="initMap()"></baidu-map>
    </div>
  </div>
</template>
<script>
require('echarts/extension/bmap/bmap');
import * as echarts from "echarts";
export default {
  data() {
    return {
      map: "", // 地图
      maps: [], // 站点信息数组
      nowStationId: '',
      points: [],
      icons: [],
    };
  },
  methods: {
    //飞线图
    initMap() {
      let myChart = echarts.init(document.getElementById('map2'));
      //飞线图标
      const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

      let option = {
        // tooltip: {
        //   trigger: 'item'
        // },
        bmap: {
          center: [106.549238, 29.57553],
          zoom: 5,
          roam: true,
          // mapStyleV2: {
          //设置地图自定义样式
          // styleId: "1c9508432f1bd060b4485d79045d5bdd",
          // },
        },
        series : [
          //飞线数据
          {
            // name: 'wha Top2',
            //用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            symbol:'circle',
            symbolSize:10,
            // symbolSize: function(val) {
            //   return 5+ val[2] * 5; //圆环大小
            // },
            //线特效的配置
            effect: {
              show: true,
              //特效动画的时间
              period: 8,
              //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
              trailLength: 0,
              symbol: 'arrow',
              //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
              symbolSize: 10
            },
            lineStyle: {
              normal: {
                color: '#a6c84c',
                width: 3,
                opacity: 0.5,
                //边的曲度，支持从 0 到 1 的值，值越大曲度越大
                curveness: 0.2
              }
            },
            //线数据集,需要转换数据
            data: [{
              // fromName: "北京",
              // toName: "上海",
              coords: [[116.4551, 40.2539], [121.4648, 31.2891]]
            },
              {
                // fromName: "上海",
                // toName: "广西",
                coords: [[121.4648, 31.2891], [110.229321,25.227083]]
              },
            ]
          },
          // 点数据
          {
            name: '打点',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: [
              {name: '海门', value: [121.15, 31.89, 9]},
              {name: '鄂尔多斯', value:[109.781327, 39.608266, 12]}
            ],
            encode: { //用哪个纬度的数据项
              value: 2
            },
            // ECharts 提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
            // symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
            symbol: ['pin'],
            symbolSize: function (val) {
              return 20;
            },
            //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
            showEffectOn: 'emphasis',

            //涟漪特效相关配置。
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            itemStyle: {
              color: 'red',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            zlevel: 1
          }
        ],
      };
      myChart.setOption(option);
      myChart.on('click', function(event) {
        console.log(event)
        // 判断点击的是图标
        if(event.componentSubType === "effectScatter") {
          console.log("点击图标")
        }
      })


    }
  }
};
</script>