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

使用Echarts和百度地图实现飞线图与坐标打点

原创

已于 2023-04-03 14:42:35 修改 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue

于 2023-03-31 17:42:20 首次发布

该示例展示了如何在Vue.js应用中结合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,