Echarts dual map many-to-many fly lines
[TOC]
Original intention: Due to the requirement of large-screen data visualization, two Echarts need to be drawn on one map, namely the multi-pair multi-flying line linkage effect between provincial map and national map.
-
Echarts Community Works address
https://www.makeapie.com/editor.html?c=xGSYrvxeGr Copy the code
The front data
Get json data of provincial and national maps
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
Copy the code
City latitude and longitude query
http://www.jsons.cn/lngcode/
Copy the code
The capital of the coordinate
/* Provincial capital coordinates */
var geoCood = [
/ / 23 provinces{name:' Gansu ', geoCoord:[103.73.36.03}, {name:' qinghai ', geoCoord:[101.74.36.56}, {name:' sichuan ', geoCoord:[104.06.30.67}, {name:' hebei ', geoCoord:[114.48.38.03}, {name:' yunnan ', geoCoord:[102.73.25.04}, {name:' guizhou ', geoCoord:[106.71.26.57}, {name:' hubei ', geoCoord:[114.31.30.52}, {name:' henan ', geoCoord:[113.65.34.76}, {name:' shandong ', geoCoord:[117.36.65}, {name:' geoCoord ', geoCoord:[118.78.32.04}, {name:' anhui ', geoCoord:[117.27.31.86}, {name:' zhejiang ', geoCoord:[120.19.30.26}, {name:' geoCoord ', geoCoord:[115.89.28.68}, {name:' fujian ', geoCoord:[119.3.26.08}, {name:' guangdong ', geoCoord:[113.23.23.16}, {name:' hunan ', geoCoord:[113.28.21}, {name:' hainan ', geoCoord:[110.35.20.02}, {name:' liaoning ', geoCoord:[123.38.41.8}, {name:' geoCoord ', geoCoord:[125.35.43.88}, {name:' geoCoord ', geoCoord:[126.63.45.75}, {geoCoord:[geoCoord:[112.53.37.87}, {name:' shaanxi ', geoCoord:[108.95.34.27}, {name:' Taiwan ', geoCoord:[121.30.25.03]},
// 4 Municipalities{name:' Beijing ', geoCoord:[116.46.39.92}, {name:' Shanghai ', geoCoord:[121.48.31.22}, {name:' chongqing ', geoCoord:[106.54.29.59}, {name:' geoCoord ', geoCoord:[117.2.39.13]},
// 5 Autonomous Region{name:' Inner Mongolia ', geoCoord:[111.65.40.82}, {name:' guangxi ', geoCoord:[108.33.22.84}, {name:' Tibet ', geoCoord:[91.11.29.97}, {name:' ningxia ', geoCoord:[106.27.38.47}, {name:' xinjiang ', geoCoord:[87.68.43.77]},
// 2 Special Administrative Region{name:' Hong Kong ', geoCoord:[114.17.22.28}, {name:' macau ', geoCoord:[113.54.22.19}] var geoCoord = {' geoCoord ':[103.73.36.03], 'Qinghai ':[101.74.36.56], 'Sichuan ':[104.06.30.67], 'Hebei ':[114.48.38.03], 'Yunnan ':[102.73.25.04], 'Guizhou ':[106.71.26.57], 'Hubei ':[114.31.30.52], 'Henan ':[113.65.34.76], 'Shandong ':[117.36.65], 'Jiangsu ':[118.78.32.04], 'Anhui ':[117.27.31.86], 'Zhejiang ':[120.19.30.26], 'jiangxi ':[115.89.28.68], 'Fujian ':[119.3.26.08], 'Guangdong ':[113.23.23.16], 'hunan ':[113.28.21], 'Hainan ':[110.35.20.02], 'Liaoning ':[123.38.41.8], 'jilin ':[125.35.43.88], 'Heilongjiang ':[126.63.45.75], 'Shanxi ':[112.53.37.87], 'Shaanxi ':[108.95.34.27], 'Taiwan ':[121.30.25.03], 'Beijing ':[116.46.39.92], 'Shanghai ':[121.48.31.22], 'Chongqing ':[106.54.29.59], 'Tianjin ':[117.2.39.13], 'Inner Mongolia ':[111.65.40.82], 'guangxi ':[108.33.22.84], 'Xizang ':[91.11.29.97], 'Ningxia ':[106.27.38.47], 'Xinjiang ':[87.68.43.77], 'Hong Kong ':[114.17.22.28], 'Macau ':[113.54.22.19]};/* Provincial capital */Var geoCood = [{name:' ', geoCoord:[103.73.36.03}, {name:' xining ', geoCoord:[101.74.36.56}, {name: geoCoord:[104.06.30.67}, {name: geoCoord:[114.48.38.03}, {geoCoord:[geoCoord:[102.73.25.04}, {name:' guiyang ', geoCoord:[106.71.26.57}, {name:' wuhan ', geoCoord:[114.31.30.52}, {name:' zhengzhou ', geoCoord:[113.65.34.76}, {name:' ji nan ', geoCoord:[117.36.65}, {name:' geoCoord ', geoCoord:[118.78.32.04}, {name:' hefei ', geoCoord:[117.27.31.86}, {name:' hangzhou ', geoCoord:[120.19.30.26}, {name: geoCoord:[115.89.28.68}, {name:' fuzhou ', geoCoord:[119.3.26.08}, {name:' guangzhou ', geoCoord:[113.23.23.16}, {name:' changsha ', geoCoord:[113.28.21}, {name:' haikou ', geoCoord:[110.35.20.02}, {name:' shenyang ', geoCoord:[123.38.41.8}, {name:' changchun ', geoCoord:[125.35.43.88}, {name:' Harbin ', geoCoord:[126.63.45.75}, {name:' taiyuan ', geoCoord:[112.53.37.87}, {name:' xian ', geoCoord:[108.95.34.27}, {name:' Taiwan ', geoCoord:[121.30.25.03}, {name:' Beijing ', geoCoord:[116.46.39.92}, {name:' Shanghai ', geoCoord:[121.48.31.22}, {name:' chongqing ', geoCoord:[106.54.29.59}, {name:' geoCoord ', geoCoord:[117.2.39.13}, {name:' geoCoord ', geoCoord:[111.65.40.82}, {name:' guangxi ', geoCoord:[108.33.22.84}, {name:' Tibet ', geoCoord:[91.11.29.97}, {name:' ningxia ', geoCoord:[106.27.38.47}, {name:' xinjiang ', geoCoord:[87.68.43.77}, {name:' Hong Kong ', geoCoord:[114.17.22.28}, {name:' macau ', geoCoord:[113.54.22.19]}]/* * * * */Var places = [{name:' haimen ', geoCoord:[121.15.31.89}, {name:' ordos ', geoCoord:[109.781327.39.608266}, {geoCoord:[geoCoord:[120.38.37.35}, {name:' zhoushan ', geoCoord:[122.207216.29.985295}, {name: geoCoord:[123.97.47.33}, {name:' yancheng ', geoCoord:[120.13.33.38}, {name:' chifeng ', geoCoord:[118.87.42.28}, {name:' Qingdao ', geoCoord:[120.33.36.07}, {name:' Rushan ', geoCoord:[121.52.36.89}, {name:' jinchang ', geoCoord:[102.188043.38.520089}, {name:' quanzhou ', geoCoord:[118.58.24.93}, {name:' geoCoord ', geoCoord:[120.53.36.86}, {geoCoord:[geoCoord:[119.46.35.42}, {name:' jiaonan ', geoCoord:[119.97.35.88}, {name:' nantong ', geoCoord:[121.05.32.08}, {geoCoord:[geoCoord:[91.11.29.97}, {name:' yunfu ', geoCoord:[112.02.22.93}, {name:' geoCoord ', geoCoord:[116.1.24.55}, {name:' wendeng ', geoCoord:[122.05.37.2}, {name:' Shanghai ', geoCoord:[121.48.31.22}, {name:' panzhihua ', geoCoord:[101.718637.26.582347}, {name:' weihai ', geoCoord:[122.1.37.5}, {name:' chengde ', geoCoord:[117.93.40.97}, {geoCoord:[geoCoord:[118.1.24.46}, {geoCoord:[geoCoord:[115.375279.22.786211}, {name:' chaozhou ', geoCoord:[116.63.23.68}, {name:' dandong ', geoCoord:[124.37.40.13}, {geoCoord:[geoCoord:[121.1.31.45}, {name:' qujing ', geoCoord:[103.79.25.51}, {name:' yantai ', geoCoord:[121.39.37.52}, {name:' fuzhou ', geoCoord:[119.3.26.08}, {name:' geoCoord ', geoCoord:[121.979603.39.627114}, {geoCoord:[geoCoord:[120.45.36.38}, {name:' fushan ', geoCoord:[123.97.41.97}, {name:' yuxi ', geoCoord:[102.52.24.35}, {name:' geoCoord ', geoCoord:[114.87.40.82}, {name:' yangquan ', geoCoord:[113.57.37.85}, {name:' laizhou ', geoCoord:[119.942327.37.177017}, {name:' huzhou ', geoCoord:[120.1.30.86}, {name:' sou ', geoCoord:[116.69.23.39}, {name:' kunsan ', geoCoord:[120.95.31.39}, {name:' ningbo ', geoCoord:[121.56.29.86}, {name:' zhanjiang ', geoCoord:[110.359377.21.270708}, {name: geoCoord:[116.35.23.55}, {name:' rongcheng ', geoCoord:[122.41.37.16}, {name:' geoCoord ', geoCoord:[119.16.34.59}, {name:' geoCoord ', geoCoord:[120.836932.40.711052}, {geoCoord:[geoCoord:[120.74.31.64}, {name:' dongguan ', geoCoord:[113.75.23.04}, {name:' heyuan ', geoCoord:[114.68.23.73}, {name:' huai 'an ', geoCoord:[119.15.33.5}, {name:' taizhou ', geoCoord:[119.9.32.49}, {name:' geoCoord ', geoCoord:[108.33.22.84}, {geoCoord:[geoCoord:[122.18.40.65}, {name:' hui ', geoCoord:[114.4.23.09}, {name:' jiangyin ', geoCoord:[120.26.31.91}, {name: geoCoord:[120.75.37.8}, {name:' geoCoord ', geoCoord:[113.62.24.84}, {name:' Jiayuguan ', geoCoord:[98.289152.39.77313}, {name:' guangzhou ', geoCoord:[113.23.23.16}, {name:' yan 'an ', geoCoord:[109.47.36.6}, {name:' taiyuan ', geoCoord:[112.53.37.87}, {name:' qingyuan ', geoCoord:[113.01.23.7}, {name:' zhong zhong ', geoCoord:[113.38.22.52}, {name:' kunming ', geoCoord:[102.73.25.04}, {name:' shouiguang ', geoCoord:[118.73.36.86}, {name:' geoCoord ', geoCoord:[122.070714.41.119997}, {name:' changzhi ', geoCoord:[113.08.36.18}, {geoCoord:[geoCoord:[114.07.22.62}, {name:' zhuhai ', geoCoord:[113.52.22.3}, {name:' suqian ', geoCoord:[118.3.33.96}, {name: geoCoord:[108.72.34.36}, {name:' tongchuan ', geoCoord:[109.11.35.09}, {geoCoord:[geoCoord:[119.97.36.77}, {name:' foshan ', geoCoord:[113.11.23.05}, {name:' haikou ', geoCoord:[110.35.20.02}, {name:' jiangmen ', geoCoord:[113.06.22.61}, {name:' zhang ', geoCoord:[117.53.36.72}, {geoCoord:[geoCoord:[112.44.23.05}, {name:' dalian ', geoCoord:[121.62.38.92}, {name:' linfen ', geoCoord:[111.5.36.08}, {name:' wujiang ', geoCoord:[120.63.31.16}, {name:' Shizuishan ', geoCoord:[106.39.39.04}, {name:' shenyang ', geoCoord:[123.38.41.8}, {name:' suzhou ', geoCoord:[120.62.31.32}, {name:' maoming ', geoCoord:[110.88.21.68}, {name:' jiaxing ', geoCoord:[120.76.30.77}, {name:' changchun ', geoCoord:[125.35.43.88}, {name:' jiaozhou ', geoCoord:[120.03336.36.264622}, {name:' yinchuan ', geoCoord:[106.27.38.47}, {name:' jiagang ', geoCoord:[120.555821.31.875428}, {name:' sanmenxia ', geoCoord:[111.19.34.76}, {name:' jinzhou ', geoCoord:[121.15.41.13}, {name: geoCoord:[115.89.28.68}, {name:' geoCoord ', geoCoord:[109.4.24.33}, {geoCoord:[geoCoord:[109.511909.18.252847}, {name:' zigong ', geoCoord:[104.778442.29.33903}, {name:' geoCoord ', geoCoord:[126.57.43.87}, {name:' yangjiang ', geoCoord:[111.95.21.85}, {name:' luzhou ', geoCoord:[105.39.28.91}, {name:' xining ', geoCoord:[101.74.36.56}, {name:' yibin ', geoCoord:[104.56.29.77}, {name:' Hohhot ', geoCoord:[111.65.40.82}, {name: geoCoord:[104.06.30.67}, {geoCoord:[geoCoord:[113.3.40.12}, {name:' zhenjiang ', geoCoord:[119.44.32.2}, {name:' guilin ', geoCoord:[110.28.25.29}, {name:' zhangjiajie ', geoCoord:[110.479191.29.117096}, {name:' yixing ', geoCoord:[119.82.31.36}, {name:' beihai ', geoCoord:[109.12.21.49}, {name:' xian ', geoCoord:[108.95.34.27}, {geoCoord:[geoCoord:[119.56.31.74}, {geoCoord:[geoCoord:[118.49.37.46}, {name:' mudanjiang ', geoCoord:[129.58.44.6}, {name:' zunyi ', geoCoord:[106.9.27.7}, {name:' shaoxing ', geoCoord:[120.58.30.01}, {name: geoCoord:[119.42.32.39}, {name:' changzhou ', geoCoord:[119.95.31.79}, {name:' weifang ', geoCoord:[119.1.36.62}, {name:' chongqing ', geoCoord:[106.54.29.59}, {name:' taizhou ', geoCoord:[121.420757.28.656386}, {name:' geoCoord ', geoCoord:[118.78.32.04}, {name:' binzhou ', geoCoord:[118.03.37.36}, {name:' guiyang ', geoCoord:[106.71.26.57}, {name:' wuxi ', geoCoord:[120.29.31.59}, {name:' benxi ', geoCoord:[123.73.41.3}, {name:' karamay ', geoCoord:[84.77.45.59}, {name:' weinan ', geoCoord:[109.5.34.52}, {name:' ma on shan ', geoCoord:[118.48.31.56}, {name:' baoji ', geoCoord:[107.15.34.38}, {geoCoord:[geoCoord:[113.21.35.24}, {geoCoord:[geoCoord:[119.16.31.95}, {name:' Beijing ', geoCoord:[116.46.39.92}, {name:' xuzhou ', geoCoord:[117.2.34.26}, {name:' hengwater ', geoCoord:[115.72.37.72}, {name:' baotou ', geoCoord:[110.40.58}, {name:' mianyang ', geoCoord:[104.73.31.48}, {name:' urumqi ', geoCoord:[87.68.43.77}, {name:' zaozhuang ', geoCoord:[117.57.34.86}, {name:' hangzhou ', geoCoord:[120.19.30.26}, {name:' zibo ', geoCoord:[118.05.36.78}, {name:' saddle ', geoCoord:[122.85.41.12}, {name:' Liyang ', geoCoord:[119.48.31.43}, {name:' korla ', geoCoord:[86.06.41.68}, {name: geoCoord:[114.35.36.1}, {geoCoord:[geoCoord:[114.35.34.79}, {name:' ji nan ', geoCoord:[117.36.65}, {name:' d ', geoCoord:[104.37.31.13}, {name: geoCoord:[120.65.28.01}, {name:' jiujiang ', geoCoord:[115.97.29.71}, {name: geoCoord:[114.47.36.6}, {name:' linan ', geoCoord:[119.72.30.23}, {name:' lanzhou ', geoCoord:[103.73.36.03}, {name:' cangzhou ', geoCoord:[116.83.38.33}, {name:' linyi ', geoCoord:[118.35.35.05}, {name:' nanzhong ', geoCoord:[106.110698.30.837793}, {name:' geoCoord ', geoCoord:[117.2.39.13}, {name:' fuyang ', geoCoord:[119.95.30.07}, {name:' taian ', geoCoord:[117.13.36.18}, {name:' zhuji ', geoCoord:[120.23.29.71}, {name:' zhengzhou ', geoCoord:[113.65.34.76}, {name:' Harbin ', geoCoord:[126.63.45.75}, {name:' liaocheng ', geoCoord:[115.97.36.45}, {name:' wuhu ', geoCoord:[118.38.31.33}, {name:' tangshan ', geoCoord:[118.02.39.63}, {name:' geoCoord ', geoCoord:[113.29.33.75}, {name:' xingtai ', geoCoord:[114.48.37.05}, {name: geoCoord:[116.29.37.45}, {name:' jining ', geoCoord:[116.59.35.38}, {name:' jingzhou ', geoCoord:[112.239741.30.335165}, {name:' yichang ', geoCoord:[111.3.30.7}, {name:' yiwu ', geoCoord:[120.06.29.32}, {name: geoCoord:[119.92.28.45}, {name:' luoyang ', geoCoord:[112.44.34.7}, {name:' qinhuangdao ', geoCoord:[119.57.39.95}, {name:' zhuzhou ', geoCoord:[113.16.27.83}, {name: geoCoord:[114.48.38.03}, {name:' laiwu ', geoCoord:[117.67.36.19}, {name:' changde ', geoCoord:[111.69.29.05}, {name:' baoding ', geoCoord:[115.48.38.85}, {name:' xiangtan ', geoCoord:[112.91.27.87}, {name:' jinhua ', geoCoord:[119.64.29.12}, {name:' yue Yang ', geoCoord:[113.09.29.37}, {name:' changsha ', geoCoord:[113.28.21}, {name: quzhou ', geoCoord:[118.88.28.97}, {name:' langfang ', geoCoord:[116.7.39.53}, {name:' Heze ', geoCoord:[115.480656.35.23375}, {name:' hefei ', geoCoord:[117.27.31.86}, {name:' wuhan ', geoCoord:[114.31.30.52}, {name:' daqing ', geoCoord:[125.03.46.58]}]/* 23 provinces, 4 municipalities directly under the Central Government, 5 autonomous regions, 2 special administrative regions */
var citys = [
{"name": "Beijing"."abbreviation": "Beijing"."capital": "Beijing"},
{"name": "Tianjin"."abbreviation": "Jin"."capital": "Tianjin"},
{"name": "Hebei Province"."abbreviation": "Ji"."capital": "Shijiazhuang"},
{"name": "Shanxi Province"."abbreviation": "Jin"."capital": "Taiyuan"},
{"name": "Inner Mongolia Autonomous Region"."abbreviation": Inner Mongolia."capital": "Hohhot"},
{"name": "Liaoning"."abbreviation": "Liao"."capital": "Shenyang"},
{"name": Jilin Province."abbreviation": "Ji"."capital": "Changchun"},
{"name": "Heilongjiang province"."abbreviation": "Black"."capital": "Harbin"},
{"name": "Shanghai"."abbreviation": "Shanghai"."capital": "Shanghai"},
{"name": Jiangsu Province."abbreviation": "Sue"."capital": Nanjing City},
{"name": Zhejiang Province."abbreviation": "Zhe"."capital": "Hangzhou"},
{"name": Anhui Province."abbreviation": "Anhui"."capital": "Hefei"},
{"name": "Fujian"."abbreviation": "Min"."capital": "Fuzhou"},
{"name": "Jiangxi"."abbreviation": "Gan"."capital": "Nanchang"},
{"name": "Shandong Province"."abbreviation": "Lu"."capital": "Jinan"},
{"name": Henan Province."abbreviation": "Yu"."capital": "Zhengzhou"},
{"name": Hubei Province."abbreviation": "鄂"."capital": Wuhan City},
{"name": "Hunan Province"."abbreviation": "Xiang"."capital": "Changsha"},
{"name": "Guangdong province"."abbreviation": "Yue"."capital": "Guangzhou"},
{"name": Guangxi Zhuang Autonomous Region."abbreviation": "Laurel"."capital": "Nanning"},
{"name": Hainan Province."abbreviation": "Joan"."capital": "Haikou"},
{"name": Chongqing Municipality."abbreviation": "Chongqing"."capital": "Chongqing"},
{"name": Sichuan Province."abbreviation": Sichuan/Shu."capital": "Chengdu"},
{"name": "Guizhou"."abbreviation": "Qian/GUI"."capital": "Guiyang"},
{"name": Yunnan Province."abbreviation": "Cloud/Yunnan"."capital": "Kunming"},
{"name": "Tibet Autonomous Region"."abbreviation": "Hide"."capital": "Lhasa"},
{"name": "Shaanxi Province"."abbreviation": "Shaanxi/Qin"."capital": "Xi 'an"},
{"name": Gansu Province."abbreviation": "Gan/Long"."capital": "Lanzhou"},
{"name": "Qinghai Province"."abbreviation": "Green"."capital": "Xining city"},
{"name": "Ningxia Hui Autonomous Region"."abbreviation": "Better"."capital": "Yinchuan"},
{"name": "Xinjiang Uygur Autonomous Region"."abbreviation": "New"."capital": "Urumqi"},
{"name": Hong Kong Special Administrative Region."abbreviation": "Hong Kong"."capital": "Hong Kong"},
{"name": "Macao Special Administrative Region"."abbreviation": "Australia"."capital": "Macau"},
{"name": Taiwan Province "abbreviation": "Taiwan" "capital": Taipei City}]Copy the codeRelevant reference
https://www.jianshu.com/p/7337c2f56876
Copy the coderegisterMap api
In the official document in the API, echarts a registerMap (mapName, geoJson, specialAreas) method, this method has three arguments:
- MapName: the name of the map. The name must be the same as the value of option–series–mapType in the map configuration.
- GeoJson: Data in geoJson format. For details, see geojson.org/.
- SpecialAreas: Optional parameters. For details, refer to the documentation.
code
Code file structure
├ ─ China. Js -- -- -- -- -- - / / China. Js ├ ─ hubei. The json json data - / / provinces └ ─ index. The vue components -- -- -- -- -- / / mapCopy the code- First installation
echarts4.0.0Version, used in main.jsThe require wayThe introduction ofchain.js
Json data of province
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
Copy the codeVue file
<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>
Copy the codeBlue Cloud complete code
https://wwa.lanzoui.com/iQov4wugzgj
Copy the code