echarts双地图多对多飞线

[TOC]

初衷：因大屏数据可视化需求，需要将两个echarts绘制在一个图上，即省份地图和全国地图之间的多对多飞线联动效果。

• echarts 社区作品地址

  https://www.makeapie.com/editor.html?c=xGSYrvxeGr
  

前置资料

获取省份及全国地图json数据

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

城市经纬度查询

http://www.jsons.cn/lngcode/

省会坐标

/* 各省份的省会坐标[经度,纬度] */
var geoCood = [
// 23省
{name:'甘肃', geoCoord:[103.73, 36.03]},
{name:'青海', geoCoord:[101.74, 36.56]},
{name:'四川', geoCoord:[104.06, 30.67]},
{name:'河北', geoCoord:[114.48, 38.03]},
{name:'云南', geoCoord:[102.73, 25.04]},
{name:'贵州', geoCoord:[106.71, 26.57]},
{name:'湖北', geoCoord:[114.31, 30.52]},
{name:'河南', geoCoord:[113.65, 34.76]},
{name:'山东', geoCoord:[117, 36.65]},
{name:'江苏', geoCoord:[118.78, 32.04]},
{name:'安徽', geoCoord:[117.27, 31.86]},
{name:'浙江', geoCoord:[120.19, 30.26]},
{name:'江西', geoCoord:[115.89, 28.68]},
{name:'福建', geoCoord:[119.3, 26.08]},
{name:'广东', geoCoord:[113.23, 23.16]},
{name:'湖南', geoCoord:[113, 28.21]},
{name:'海南', geoCoord:[110.35, 20.02]},
{name:'辽宁', geoCoord:[123.38, 41.8]},
{name:'吉林', geoCoord:[125.35, 43.88]},
{name:'黑龙江', geoCoord:[126.63, 45.75]},
{name:'山西', geoCoord:[112.53, 37.87]},
{name:'陕西', geoCoord:[108.95, 34.27]},
{name:'台湾', geoCoord:[121.30, 25.03]},
// 4直辖市
{name:'北京', geoCoord:[116.46, 39.92]},
{name:'上海', geoCoord:[121.48, 31.22]},
{name:'重庆', geoCoord:[106.54, 29.59]},
{name:'天津', geoCoord:[117.2, 39.13]},
// 5自治区
{name:'内蒙古', geoCoord:[111.65, 40.82]},
{name:'广西', geoCoord:[108.33, 22.84]},
{name:'西藏', geoCoord:[91.11, 29.97]},
{name:'宁夏', geoCoord:[106.27, 38.47]},
{name:'新疆', geoCoord:[87.68, 43.77]},
// 2特别行政区
{name:'香港', geoCoord:[114.17, 22.28]},
{name:'澳门', geoCoord:[113.54, 22.19]}
]

var geoCoord = {
'甘肃':[103.73, 36.03],
'青海':[101.74, 36.56],
'四川':[104.06, 30.67],
'河北':[114.48, 38.03],
'云南':[102.73, 25.04],
'贵州':[106.71, 26.57],
'湖北':[114.31, 30.52],
'河南':[113.65, 34.76],
'山东':[117, 36.65],
'江苏':[118.78, 32.04],
'安徽':[117.27, 31.86],
'浙江':[120.19, 30.26],
'江西':[115.89, 28.68],
'福建':[119.3, 26.08],
'广东':[113.23, 23.16],
'湖南':[113, 28.21],
'海南':[110.35, 20.02],
'辽宁':[123.38, 41.8],
'吉林':[125.35, 43.88],
'黑龙江':[126.63, 45.75],
'山西':[112.53, 37.87],
'陕西':[108.95, 34.27],
'台湾':[121.30, 25.03],
'北京':[116.46, 39.92],
'上海':[121.48, 31.22],
'重庆':[106.54, 29.59],
'天津':[117.2, 39.13],
'内蒙古':[111.65, 40.82],
'广西':[108.33, 22.84],
'西藏':[91.11, 29.97],
'宁夏':[106.27, 38.47],
'新疆':[87.68, 43.77],
'香港':[114.17, 22.28],
'澳门':[113.54, 22.19]
};

/* 省会坐标,name为省会 */
var geoCood = [
{name:'兰州', geoCoord:[103.73, 36.03]},
{name:'西宁', geoCoord:[101.74, 36.56]},
{name:'成都', geoCoord:[104.06, 30.67]},
{name:'石家庄', geoCoord:[114.48, 38.03]},
{name:'拉萨', geoCoord:[102.73, 25.04]},
{name:'贵阳', geoCoord:[106.71, 26.57]},
{name:'武汉', geoCoord:[114.31, 30.52]},
{name:'郑州', geoCoord:[113.65, 34.76]},
{name:'济南', geoCoord:[117, 36.65]},
{name:'南京', geoCoord:[118.78, 32.04]},
{name:'合肥', geoCoord:[117.27, 31.86]},
{name:'杭州', geoCoord:[120.19, 30.26]},
{name:'南昌', geoCoord:[115.89, 28.68]},
{name:'福州', geoCoord:[119.3, 26.08]},
{name:'广州', geoCoord:[113.23, 23.16]},
{name:'长沙', geoCoord:[113, 28.21]},
{name:'海口', geoCoord:[110.35, 20.02]},
{name:'沈阳', geoCoord:[123.38, 41.8]},
{name:'长春', geoCoord:[125.35, 43.88]},
{name:'哈尔滨', geoCoord:[126.63, 45.75]},
{name:'太原', geoCoord:[112.53, 37.87]},
{name:'西安', geoCoord:[108.95, 34.27]},
{name:'台湾', geoCoord:[121.30, 25.03]},
{name:'北京', geoCoord:[116.46, 39.92]},
{name:'上海', geoCoord:[121.48, 31.22]},
{name:'重庆', geoCoord:[106.54, 29.59]},
{name:'天津', geoCoord:[117.2, 39.13]},
{name:'内蒙古', geoCoord:[111.65, 40.82]},
{name:'广西', geoCoord:[108.33, 22.84]},
{name:'西藏', geoCoord:[91.11, 29.97]},
{name:'宁夏', geoCoord:[106.27, 38.47]},
{name:'新疆', geoCoord:[87.68, 43.77]},
{name:'香港', geoCoord:[114.17, 22.28]},
{name:'澳门', geoCoord:[113.54, 22.19]}
]

/* 常用省市坐标 */
var places = [
{name:'海门', geoCoord:[121.15, 31.89]},
{name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
{name:'招远', geoCoord:[120.38, 37.35]},
{name:'舟山', geoCoord:[122.207216, 29.985295]},
{name:'齐齐哈尔', geoCoord:[123.97, 47.33]},
{name:'盐城', geoCoord:[120.13, 33.38]},
{name:'赤峰', geoCoord:[118.87, 42.28]},
{name:'青岛', geoCoord:[120.33, 36.07]},
{name:'乳山', geoCoord:[121.52, 36.89]},
{name:'金昌', geoCoord:[102.188043, 38.520089]},
{name:'泉州', geoCoord:[118.58, 24.93]},
{name:'莱西', geoCoord:[120.53, 36.86]},
{name:'日照', geoCoord:[119.46, 35.42]},
{name:'胶南', geoCoord:[119.97, 35.88]},
{name:'南通', geoCoord:[121.05, 32.08]},
{name:'拉萨', geoCoord:[91.11, 29.97]},
{name:'云浮', geoCoord:[112.02, 22.93]},
{name:'梅州', geoCoord:[116.1, 24.55]},
{name:'文登', geoCoord:[122.05, 37.2]},
{name:'上海', geoCoord:[121.48, 31.22]},
{name:'攀枝花', geoCoord:[101.718637, 26.582347]},
{name:'威海', geoCoord:[122.1, 37.5]},
{name:'承德', geoCoord:[117.93, 40.97]},
{name:'厦门', geoCoord:[118.1, 24.46]},
{name:'汕尾', geoCoord:[115.375279, 22.786211]},
{name:'潮州', geoCoord:[116.63, 23.68]},
{name:'丹东', geoCoord:[124.37, 40.13]},
{name:'太仓', geoCoord:[121.1, 31.45]},
{name:'曲靖', geoCoord:[103.79, 25.51]},
{name:'烟台', geoCoord:[121.39, 37.52]},
{name:'福州', geoCoord:[119.3, 26.08]},
{name:'瓦房店', geoCoord:[121.979603, 39.627114]},
{name:'即墨', geoCoord:[120.45, 36.38]},
{name:'抚顺', geoCoord:[123.97, 41.97]},
{name:'玉溪', geoCoord:[102.52, 24.35]},
{name:'张家口', geoCoord:[114.87, 40.82]},
{name:'阳泉', geoCoord:[113.57, 37.85]},
{name:'莱州', geoCoord:[119.942327, 37.177017]},
{name:'湖州', geoCoord:[120.1, 30.86]},
{name:'汕头', geoCoord:[116.69, 23.39]},
{name:'昆山', geoCoord:[120.95, 31.39]},
{name:'宁波', geoCoord:[121.56, 29.86]},
{name:'湛江', geoCoord:[110.359377, 21.270708]},
{name:'揭阳', geoCoord:[116.35, 23.55]},
{name:'荣成', geoCoord:[122.41, 37.16]},
{name:'连云港', geoCoord:[119.16, 34.59]},
{name:'葫芦岛', geoCoord:[120.836932, 40.711052]},
{name:'常熟', geoCoord:[120.74, 31.64]},
{name:'东莞', geoCoord:[113.75, 23.04]},
{name:'河源', geoCoord:[114.68, 23.73]},
{name:'淮安', geoCoord:[119.15, 33.5]},
{name:'泰州', geoCoord:[119.9, 32.49]},
{name:'南宁', geoCoord:[108.33, 22.84]},
{name:'营口', geoCoord:[122.18, 40.65]},
{name:'惠州', geoCoord:[114.4, 23.09]},
{name:'江阴', geoCoord:[120.26, 31.91]},
{name:'蓬莱', geoCoord:[120.75, 37.8]},
{name:'韶关', geoCoord:[113.62, 24.84]},
{name:'嘉峪关', geoCoord:[98.289152, 39.77313]},
{name:'广州', geoCoord:[113.23, 23.16]},
{name:'延安', geoCoord:[109.47, 36.6]},
{name:'太原', geoCoord:[112.53, 37.87]},
{name:'清远', geoCoord:[113.01, 23.7]},
{name:'中山', geoCoord:[113.38, 22.52]},
{name:'昆明', geoCoord:[102.73, 25.04]},
{name:'寿光', geoCoord:[118.73, 36.86]},
{name:'盘锦', geoCoord:[122.070714, 41.119997]},
{name:'长治', geoCoord:[113.08, 36.18]},
{name:'深圳', geoCoord:[114.07, 22.62]},
{name:'珠海', geoCoord:[113.52, 22.3]},
{name:'宿迁', geoCoord:[118.3, 33.96]},
{name:'咸阳', geoCoord:[108.72, 34.36]},
{name:'铜川', geoCoord:[109.11, 35.09]},
{name:'平度', geoCoord:[119.97, 36.77]},
{name:'佛山', geoCoord:[113.11, 23.05]},
{name:'海口', geoCoord:[110.35, 20.02]},
{name:'江门', geoCoord:[113.06, 22.61]},
{name:'章丘', geoCoord:[117.53, 36.72]},
{name:'肇庆', geoCoord:[112.44, 23.05]},
{name:'大连', geoCoord:[121.62, 38.92]},
{name:'临汾', geoCoord:[111.5, 36.08]},
{name:'吴江', geoCoord:[120.63, 31.16]},
{name:'石嘴山', geoCoord:[106.39, 39.04]},
{name:'沈阳', geoCoord:[123.38, 41.8]},
{name:'苏州', geoCoord:[120.62, 31.32]},
{name:'茂名', geoCoord:[110.88, 21.68]},
{name:'嘉兴', geoCoord:[120.76, 30.77]},
{name:'长春', geoCoord:[125.35, 43.88]},
{name:'胶州', geoCoord:[120.03336, 36.264622]},
{name:'银川', geoCoord:[106.27, 38.47]},
{name:'张家港', geoCoord:[120.555821, 31.875428]},
{name:'三门峡', geoCoord:[111.19, 34.76]},
{name:'锦州', geoCoord:[121.15, 41.13]},
{name:'南昌', geoCoord:[115.89, 28.68]},
{name:'柳州', geoCoord:[109.4, 24.33]},
{name:'三亚', geoCoord:[109.511909, 18.252847]},
{name:'自贡', geoCoord:[104.778442, 29.33903]},
{name:'吉林', geoCoord:[126.57, 43.87]},
{name:'阳江', geoCoord:[111.95, 21.85]},
{name:'泸州', geoCoord:[105.39, 28.91]},
{name:'西宁', geoCoord:[101.74, 36.56]},
{name:'宜宾', geoCoord:[104.56, 29.77]},
{name:'呼和浩特', geoCoord:[111.65, 40.82]},
{name:'成都', geoCoord:[104.06, 30.67]},
{name:'大同', geoCoord:[113.3, 40.12]},
{name:'镇江', geoCoord:[119.44, 32.2]},
{name:'桂林', geoCoord:[110.28, 25.29]},
{name:'张家界', geoCoord:[110.479191, 29.117096]},
{name:'宜兴', geoCoord:[119.82, 31.36]},
{name:'北海', geoCoord:[109.12, 21.49]},
{name:'西安', geoCoord:[108.95, 34.27]},
{name:'金坛', geoCoord:[119.56, 31.74]},
{name:'东营', geoCoord:[118.49, 37.46]},
{name:'牡丹江', geoCoord:[129.58, 44.6]},
{name:'遵义', geoCoord:[106.9, 27.7]},
{name:'绍兴', geoCoord:[120.58, 30.01]},
{name:'扬州', geoCoord:[119.42, 32.39]},
{name:'常州', geoCoord:[119.95, 31.79]},
{name:'潍坊', geoCoord:[119.1, 36.62]},
{name:'重庆', geoCoord:[106.54, 29.59]},
{name:'台州', geoCoord:[121.420757, 28.656386]},
{name:'南京', geoCoord:[118.78, 32.04]},
{name:'滨州', geoCoord:[118.03, 37.36]},
{name:'贵阳', geoCoord:[106.71, 26.57]},
{name:'无锡', geoCoord:[120.29, 31.59]},
{name:'本溪', geoCoord:[123.73, 41.3]},
{name:'克拉玛依', geoCoord:[84.77, 45.59]},
{name:'渭南', geoCoord:[109.5, 34.52]},
{name:'马鞍山', geoCoord:[118.48, 31.56]},
{name:'宝鸡', geoCoord:[107.15, 34.38]},
{name:'焦作', geoCoord:[113.21, 35.24]},
{name:'句容', geoCoord:[119.16, 31.95]},
{name:'北京', geoCoord:[116.46, 39.92]},
{name:'徐州', geoCoord:[117.2, 34.26]},
{name:'衡水', geoCoord:[115.72, 37.72]},
{name:'包头', geoCoord:[110, 40.58]},
{name:'绵阳', geoCoord:[104.73, 31.48]},
{name:'乌鲁木齐', geoCoord:[87.68, 43.77]},
{name:'枣庄', geoCoord:[117.57, 34.86]},
{name:'杭州', geoCoord:[120.19, 30.26]},
{name:'淄博', geoCoord:[118.05, 36.78]},
{name:'鞍山', geoCoord:[122.85, 41.12]},
{name:'溧阳', geoCoord:[119.48, 31.43]},
{name:'库尔勒', geoCoord:[86.06, 41.68]},
{name:'安阳', geoCoord:[114.35, 36.1]},
{name:'开封', geoCoord:[114.35, 34.79]},
{name:'济南', geoCoord:[117, 36.65]},
{name:'德阳', geoCoord:[104.37, 31.13]},
{name:'温州', geoCoord:[120.65, 28.01]},
{name:'九江', geoCoord:[115.97, 29.71]},
{name:'邯郸', geoCoord:[114.47, 36.6]},
{name:'临安', geoCoord:[119.72, 30.23]},
{name:'兰州', geoCoord:[103.73, 36.03]},
{name:'沧州', geoCoord:[116.83, 38.33]},
{name:'临沂', geoCoord:[118.35, 35.05]},
{name:'南充', geoCoord:[106.110698, 30.837793]},
{name:'天津', geoCoord:[117.2, 39.13]},
{name:'富阳', geoCoord:[119.95, 30.07]},
{name:'泰安', geoCoord:[117.13, 36.18]},
{name:'诸暨', geoCoord:[120.23, 29.71]},
{name:'郑州', geoCoord:[113.65, 34.76]},
{name:'哈尔滨', geoCoord:[126.63, 45.75]},
{name:'聊城', geoCoord:[115.97, 36.45]},
{name:'芜湖', geoCoord:[118.38, 31.33]},
{name:'唐山', geoCoord:[118.02, 39.63]},
{name:'平顶山', geoCoord:[113.29, 33.75]},
{name:'邢台', geoCoord:[114.48, 37.05]},
{name:'德州', geoCoord:[116.29, 37.45]},
{name:'济宁', geoCoord:[116.59, 35.38]},
{name:'荆州', geoCoord:[112.239741, 30.335165]},
{name:'宜昌', geoCoord:[111.3, 30.7]},
{name:'义乌', geoCoord:[120.06, 29.32]},
{name:'丽水', geoCoord:[119.92, 28.45]},
{name:'洛阳', geoCoord:[112.44, 34.7]},
{name:'秦皇岛', geoCoord:[119.57, 39.95]},
{name:'株洲', geoCoord:[113.16, 27.83]},
{name:'石家庄', geoCoord:[114.48, 38.03]},
{name:'莱芜', geoCoord:[117.67, 36.19]},
{name:'常德', geoCoord:[111.69, 29.05]},
{name:'保定', geoCoord:[115.48, 38.85]},
{name:'湘潭', geoCoord:[112.91, 27.87]},
{name:'金华', geoCoord:[119.64, 29.12]},
{name:'岳阳', geoCoord:[113.09, 29.37]},
{name:'长沙', geoCoord:[113, 28.21]},
{name:'衢州', geoCoord:[118.88, 28.97]},
{name:'廊坊', geoCoord:[116.7, 39.53]},
{name:'菏泽', geoCoord:[115.480656, 35.23375]},
{name:'合肥', geoCoord:[117.27, 31.86]},
{name:'武汉', geoCoord:[114.31, 30.52]},
{name:'大庆', geoCoord:[125.03, 46.58]}
]

/* 23省，4直辖市，5自治区，2特别行政区的简称和省会 */
var citys = [
{"name": "北京市", "abbreviation": "京", "capital": "北京"},
{"name": "天津市", "abbreviation": "津", "capital": "天津"},
{"name": "河北省", "abbreviation": "冀", "capital": "石家庄市"},
{"name": "山西省", "abbreviation": "晋", "capital": "太原市"},
{"name": "内蒙古自治区", "abbreviation": "内蒙古", "capital": "呼和浩特市"},
{"name": "辽宁省", "abbreviation": "辽", "capital": "沈阳市"},
{"name": "吉林省", "abbreviation": "吉", "capital": "长春市"},
{"name": "黑龙江省", "abbreviation": "黑", "capital": "哈尔滨市"},
{"name": "上海市", "abbreviation": "沪", "capital": "上海"},
{"name": "江苏省", "abbreviation": "苏", "capital": "南京市"},
{"name": "浙江省", "abbreviation": "浙", "capital": "杭州市"},
{"name": "安徽省", "abbreviation": "皖", "capital": "合肥市"},
{"name": "福建省", "abbreviation": "闽", "capital": "福州市"},
{"name": "江西省", "abbreviation": "赣", "capital": "南昌市"},
{"name": "山东省", "abbreviation": "鲁", "capital": "济南市"},
{"name": "河南省", "abbreviation": "豫", "capital": "郑州市"},
{"name": "湖北省", "abbreviation": "鄂", "capital": "武汉市"},
{"name": "湖南省", "abbreviation": "湘", "capital": "长沙市"},
{"name": "广东省", "abbreviation": "粤", "capital": "广州市"},
{"name": "广西壮族自治区", "abbreviation": "桂", "capital": "南宁市"},
{"name": "海南省", "abbreviation": "琼", "capital": "海口市"},
{"name": "重庆市", "abbreviation": "渝", "capital": "重庆"},
{"name": "四川省", "abbreviation": "川/蜀", "capital": "成都市"},
{"name": "贵州省", "abbreviation": "黔/贵", "capital": "贵阳市"},
{"name": "云南省", "abbreviation": "云/滇", "capital": "昆明市"},
{"name": "西藏自治区", "abbreviation": "藏", "capital": "拉萨市"},
{"name": "陕西省", "abbreviation": "陕/秦", "capital": "西安市"},
{"name": "甘肃省", "abbreviation": "甘/陇", "capital": "兰州市"},
{"name": "青海省", "abbreviation": "青", "capital": "西宁市"},
{"name": "宁夏回族自治区", "abbreviation": "宁", "capital": "银川市"},
{"name": "新疆维吾尔自治区", "abbreviation": "新", "capital": "乌鲁木齐市"},
{"name": "香港特别行政区", "abbreviation": "港", "capital": "香港"},
{"name": "澳门特别行政区", "abbreviation": "澳", "capital": "澳门"},
{"name": "台湾省" "abbreviation": "台" "capital": "台北市"}
]

相关参考

https://www.jianshu.com/p/7337c2f56876

registerMap api

在官方文档API中，echarts 有一个registerMap(mapName,geoJson,specialAreas)方法，此方法有3个参数：

• mapName：地图名称，这里的名称要与地图配置中 option--series--mapType 的值保持一致。
• geoJson：geoJson 格式的数据，具体格式见 geojson.org/。
• specialAreas：可选参数，细节配置，具体参考文档。

代码

代码文件结构

├─china.js ------ // china.js
├─hubei.json ---- // 省份json数据
└─index.vue ----- // 地图组件

• 首先安装echarts4.0.0版本，在main.js中使用require方式引入chain.js

省份json数据

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

vue文件

<template>
  <div>
    <div ref="myChart" :style="{ width: '100vw', height: '100vh' }"></div>
  </div>
</template>

<script>
import hubeiJson from "./hubei.json";
import "./china.js";
export default {
  name: "hello",
  data() {
    return {
      msg: "",
    };
  },
  created() {},
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化 this.$echarts实例
      let myChart = this.$echarts.init(this.$refs["myChart"]);
      // 绘制图表

      this.$echarts.registerMap("hubei", hubeiJson, {});

      //从省会城市基础地理坐标数据,转换 为散点图的系列数据;
      var provinceGeoCoordMap = {
        甘肃: [103.73, 36.03],
        青海: [101.74, 36.56],
        四川: [104.06, 30.67],
        河北: [114.48, 38.03],
        云南: [102.73, 25.04],
        贵州: [106.71, 26.57],
        湖北: [114.31, 30.52],
        河南: [113.65, 34.76],
        山东: [117, 36.65],
        江苏: [118.78, 32.04],
        安徽: [117.27, 31.86],
        浙江: [120.19, 30.26],
        江西: [115.89, 28.68],
        福建: [119.3, 26.08],
        广东: [113.23, 23.16],
        湖南: [113, 28.21],
        海南: [110.35, 20.02],
        辽宁: [123.38, 41.8],
        吉林: [125.35, 43.88],
        黑龙江: [126.63, 45.75],
        山西: [112.53, 37.87],
        陕西: [108.95, 34.27],
        台湾: [121.3, 25.03],
        北京: [116.46, 39.92],
        上海: [121.48, 31.22],
        重庆: [106.54, 29.59],
        天津: [117.2, 39.13],
        内蒙古: [111.65, 40.82],
        广西: [108.33, 22.84],
        西藏: [91.11, 29.97],
        宁夏: [106.27, 38.47],
        新疆: [87.68, 43.77],
        香港: [114.17, 22.28],
        澳门: [113.54, 22.19],
      };
      var convertProvinceData = function () {
        var res = [];
        for (let key in provinceGeoCoordMap) {
          res.push({
            name: key,
            value: provinceGeoCoordMap[key],
          });
        }
        return res;
      };
      //从山东地图中的地理坐标数据转换为 散点图的系列数据;
      var mapJson = hubeiJson.features;

      var convertCityData = function () {
        var res = [];
        for (let index in mapJson) {
          res.push({
            name: mapJson[index].properties.name,
            value: mapJson[index].properties.center,
          });
        }

        return res;
      };

      var data = [
        [
          [117.2, 39.13], // 终点 （天津）
          [110.785239, 32.65], // 起点（十堰）
        ],
        [
          [108.33, 22.84], // 终点 （广西）
          [110.785239, 32.65], // 起点（十堰）
        ],
        [
          [112.53, 37.87], //  （山西）
          [110.785239, 32.65], // 起点（十堰）
        ],
        [
          [113, 28.21], //  （湖南）
          [110.785239, 32.65], // （十堰）
        ],


      ];
      //从两个地图的的地理坐标 转换为飞线数据
      var convertData = function () {
        var res = [];
        for (let index in data) {
           data[index][0]

          var from = myChart.convertToPixel({
             geoIndex: 0

          }, data[index][0]); // 使用第一个 geo 坐标系进行转换
          from = myChart.convertFromPixel("grid", from);
          var to = myChart.convertToPixel({ geoIndex: 1 }, data[index][1]);
          to = myChart.convertFromPixel("grid", to);
          res.push({
            coords: [to, from],
          });
        }

        return res;
      };

      let option = {
        backgroundColor: "#013954",
        title: {
          text: "平面飞线图",
        },
        grid: {},
        xAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 100,
          position: "top",
        },
        yAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 100,
          inverse: true,
        },
        geo: [
          {
            id: "china",
            map: "china",
            roam: false,
            center: [85, 36.01],
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0,
              },
            },
          },
          {
            id: "hubei",
            map: "hubei",
            roam: false,
            center: [118.5, 31.5],
            zoom: 0.7,
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              emphasis: {
                // areaColor: "#389BB7",
                borderWidth: 0,
              },
            },
          },
        ],
        series: [
          {
            id: "zuobiao",
            name: "省会坐标",
            type: "scatter",
            geoIndex: 0,
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: function (val) {
              return 10;
            },
            data: convertProvinceData(),
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.data.name;
                },
                position: "right",
              },
            },
            itemStyle: {
              normal: {
                color: "#1DE9B6", // 圆点颜色
              },
            },
          },
          {
            id: "cityzuobiao",
            name: "地市",
            type: "scatter",
            geoIndex: 1,
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: function (val) {
              return 10;
            },
            data: convertCityData(),
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.data.name;
                },
                position: "right",
              },
            },
            itemStyle: {
              normal: {
                color: "#1DE9B6", // 圆点颜色
              },
            },
          },
        ],
      };
      if (!app.inNode) {
        setTimeout(function () {
          myChart.setOption({
            series: [
              {
                id: "feixian",
                type: "lines",
                coordinateSystem: "cartesian2d",
                xAxisIndex: 0,
                yAxisIndex: 0,
                /*data:[
                        {
                            coords:[
                                [0,0],[40,40]
                            ]
                        }
                    ],*/
                data: convertData(),
                effect: {
                  show: true,
                  period: 4, //箭头指向速度，值越小速度越快
                  trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: "arrow", // 箭头图标
                  // color: "#00FFFF",
                  symbolSize: 8, // 图标大小
                },
                // 飞线样式
                lineStyle: {
                  normal: {
                    width: 1.2,
                    opacity: 0.6,
                    curveness: 0.5, // 线条曲直度
                    color: "#FFB800",
                  },
                },
              },
            ],
          });
        }, 10);
      }

      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="less">
</style>

蓝奏云完整代码

https://wwa.lanzoui.com/iQov4wugzgj

最终效果