百度地图 - 使用Echarts绘制飞线图

这是我参与 8 月更文挑战的第 10 天，活动详情查看：8 月更文挑战

简介

为了更好的理解Echarts，把配置项看完是有必要的。但是看完了也不一定记得住，比如说我。一天看一些，当看完后觉得Echarts好强大。然后除了觉得Echarts强大外，其他的基本忘了。所以动手写一些DEMO也是很有必要的。下面来了解一下如何在地图上使用Echarts绘制飞线图。

引入 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)