百度地圖 - 使用Echarts繪製飛線圖

這是我參與 8 月更文挑戰的第 10 天，活動詳情查看：8 月更文挑戰javascript

簡介

爲了更好的理解Echarts，把配置項看完是有必要的。可是看完了也不必定記得住，好比說我。一天看一些，當看完後以爲Echarts好強大。而後除了以爲Echarts強大外，其餘的基本忘了。因此動手寫一些DEMO也是頗有必要的。下面來了解一下如何在地圖上使用Echarts繪製飛線圖。html

引入 Api

經過<script>標籤引入地圖api地址、echarts地址、擴展插件地址，這裏的ak是你在地圖服務中心註冊的。不瞭解ak的點擊這裏。不瞭解地圖擴展插件的點擊這裏。

<!-- 百度 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=?"></script>
<!-- echarts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- 擴展地圖插件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
複製代碼

開始使用

初始化 echarts。

var myChart = echarts.init(document.getElementById('bmap'))
// 飛機圖形
var 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'
複製代碼

建立配置項。
經過擴展插件加載百度地圖，設置coordinateSystem: 'bmap'修改繪製時使用笛卡爾座標，在地圖上繪製圖形。使用lines繪製地圖上的飛線，使用effectScatter繪製城市點。

var option = {
  tooltip: {
    trigger: 'item',
    formatter: function (params, ticket, callback) {
      if (params.seriesType == 'effectScatter') {
        return '線路：' + params.data.name + '' + params.data.value[2]
      } else if (params.seriesType == 'lines') {
        return params.data.fromName + ' -> ' + params.data.toName + '<br />' + params.data.value
      } else {
        return params.name
      }
    }
  },
  bmap: {
    center: [106.549238, 29.57553],
    zoom: 6,
    roam: true
  },
  series: [
    {
      name: '重慶' + ' Top3',
      type: 'lines',
      coordinateSystem: 'bmap',
      zlevel: 2,
      // symbol: ['none', 'arrow'],
      effect: {
        show: true,
        period: 6,
        trailLength: 0.1,
        color: 'red', // arrow箭頭的顏色
        symbol: planePath,
        symbolSize: 15
      },
      lineStyle: {
        normal: {
          color: '#a6c84c',
          width: 1,
          curveness: 0.2
        }
      },
      data: [
        {
          fromName: '重慶',
          toName: '上海',
          coords: [
            [106.549238, 29.57553],
            [121.480509, 31.23592]
          ],
          value: 100
        },
        {
          fromName: '上海',
          toName: '北京',
          coords: [
            [121.480509, 31.23592],
            [116.403039, 39.914023]
          ],
          value: 100
        }
      ]
    },
    {
      name: '重慶' + ' Top3',
      type: 'effectScatter',
      coordinateSystem: 'bmap',
      zlevel: 1,
      rippleEffect: {
        brushType: 'stroke'
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: '{b}'
        }
      },
      symbolSize: function (val) {
        return val[2] / 8
      },
      itemStyle: {
        normal: {
          color: '#a6c84c'
        },
        emphasis: {
          areaColor: '#2B91B7'
        }
      },
      data: [
        { name: '重慶', value: [106.549238, 29.57553, 100] },
        { name: '上海', value: [121.480509, 31.23592, 100] },
        { name: '北京', value: [116.403039, 39.914023, 100] }
      ]
    }
  ]
}
複製代碼

配置都是 echarts 中的。爲了方便你們理解，下面詳細講講使用到的配置。

tooltip 提示框組件。就是當鼠標移入繪製的圖形上時展現的提示框。trigger 觸發類型，根據類型判斷在那個圖形上觸發事件。formatter 自定義提示框內容。
bmap 百度地圖擴展插件配置。center地圖中心點。zoom地圖層級。roam是否開啓拖拽縮放。
series 圖形數據。經過series設置不一樣的類型，來繪製不一樣的統計圖形。
series``type='lines' 繪製路徑圖。經過起點和終點座標繪製一條線。name系列名稱，用於 tooltip 的顯示。coordinateSystem 修改座標類型爲百度地圖類型。zlevel圖層等級，值越大層級越高。effect線特效的配置。series.show是否顯示特效。series.period特效動畫的時間，單位爲 s。series.trailLength特效尾跡的長度。取從 0 到 1 的值，數值越大尾跡越長。series.color特效標記的顏色。series.symbol標記樣式，能夠經過 'path://' 將圖標設置爲任意的矢量路徑。series.symbolSize標記的大小。lineStyle線樣式設置。lineStyle.color線顏色。lineStyle.width線寬度。lineStyle.curveness設置線爲曲線，支持從 0 到 1 的數字，爲 0 時不繪製該圖形。data數據集合。data.fromName、data.toName、data.value自定義文本，在tooltip中使用。data.coords包含兩個到多個二維座標的數組。在 polyline 設置爲 true 時支持多於兩個的座標，繪製多條線。
series``type='effectScatter' 帶有漣漪特效動畫的散點（氣泡）圖。rippleEffect漣漪特效配置，rippleEffect.brushType波紋的繪製方式。label圖形邊的文本配置，label.show是否展現，label.position標籤的位置，label.formatter自定義文本信息。symbolSize標記的大小。itemStyle圖形樣式。data數據內容數組，dtat.name自定義文本，dtat.value表示具體的數值，這裏使用的是百度擴展插件數據類型。

加載配置

myChart.setOption(option)
複製代碼