worldmap: 炫酷地图流向世界地图

echarts 实现世界地图地域流向炫酷效果

效果展示

实现世界地图地域流向炫酷效果主要步骤：

1.引入echart.js 和 world.js

<script src="echarts.min.js"></script>
<script src="world.js"></script>

2.存放地图的容器

<div id="echartsMap"></div>

3.地图生成相关逻辑

let chart = echarts.init(document.getElementById('echartsMap'));

// 小飞机的图标，可以用其他图形替换
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';

// 获取地图中起点和终点的坐标，以数组形式保存下来
var convertData = function(data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap[dataItem[0].name];
		var toCoord = geoCoordMap[dataItem[1].name];
		if (fromCoord && toCoord) {
			res.push([{
				coord: fromCoord // 起点坐标
			}, {
				coord: toCoord // 终点坐标
			}])
		}
	}
	return res;
}

var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
var series = []; // 用来存储地图数据

[
	//['中国', DMData],
	//['中国', D1LData]
	['中国', OMData]
].forEach(function(item, i) {
	series.push({
		// 白色航线特效图
		type: 'lines',
		zlevel: 1, // 用于分层，z-index的效果
		effect: {
			show: true, // 动效是否显示
			period: 6, // 特效动画时间
			trailLength: 0.7, // 特效尾迹的长度
			color: '#fff', // 特效颜色
			symbolSize: 3 // 特效大小
		},
		lineStyle: {
			normal: { // 正常情况下的线条样式
				color: color[0],
				width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
				curveness: -0.2 // 线条曲度
			}
		},
		data: convertData(item[1]) // 特效的起始、终点位置
	}, { // 小飞机航线效果
		type: 'lines',
		zlevel: 2,
		//symbol: ['none', 'arrow'],   // 用于设置箭头
		symbolSize: 10,
		effect: {
			show: true,
			period: 6,
			trailLength: 0,
			// symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
			symbolSize: 5
		},
		lineStyle: {
			normal: {
				color: color[0],
				width: 1,
				opacity: 0.6,
				curveness: -0.2
			}
		},
		data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
	}, { // 散点效果
		type: 'effectScatter',
		coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
		zlevel: 3,
		rippleEffect: {
			brushType: 'stroke' // 波纹绘制效果
		},
		label: {
			normal: { // 默认的文本标签显示样式
				show: true,
				position: 'left', // 标签显示的位置
				formatter: '{b}' // 标签内容格式器
			}
		},
		itemStyle: {
			normal: {
				color: color[0]
			}
		},
		data: item[1].map(function(dataItem) {
			return {
				name: dataItem[1].name,
				value: geoCoordMap[dataItem[1].name], // 起点的位置
				symbolSize: dataItem[1].value / 4, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
			};
		})
	});
});

// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({
	type: 'effectScatter',
	coordinateSystem: 'geo',
	zlevel: 3,
	rippleEffect: {
		brushType: 'stroke'
	},
	label: {
		normal: {
			show: true,
			position: 'left',
			formatter: '{b}'
		}
	},
	symbolSize: function(val) {
		return val[2] / 8;
	},
	itemStyle: {
		normal: {
			color: color[1]
		}
	},
	data: [{
		name: '中国',
		value: [116.46, 39.92, 30],
		label: {
			normal: {
				position: 'right'
			}
		}
	}]
});

// 最后初始化世界地图中的相关数据
chart.setOption({
	backgroundColor: '#101724',
	title: {
		//text: '中国国际贸易促进委员会',
		//subtext: '国别资讯',
		textStyle: {
			color: '#fff',
			fontSize: 20
		},
		top: '10px',
		left: '10px'
	},
	geo: {
		map: 'world', // 与引用进来的地图js名字一致
		roam: false, // 禁止缩放平移
		itemStyle: { // 每个区域的样式
			normal: {
				areaColor: '#7d7d7d'
			},
			emphasis: {
				areaColor: '#2a333d'
			}
		},
		regions: [{ // 选中的区域
			name: 'China',
			selected: false,
			itemStyle: { // 高亮时候的样式
				emphasis: {
					areaColor: '#7d7d7d'
				}
			},
			label: { // 高亮的时候不显示标签
				emphasis: {
					show: false
				}
			}
		}]
	},
	series: series, // 将之前处理的数据放到这里
	textStyle: {
		fontSize: 12
	}
});

相关数据

/*
图中相关城市经纬度,根据你的需求添加数据
关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
*/
var geoCoordMap = {
	//东盟十国
	'广州': [113.5107, 23.2196],
	'马来西亚': [101.975766, 4.210484],
	'印度尼西亚': [113.921327, -0.789275],
	'泰国': [100.992541, 15.870032],
	'菲律宾': [121.774017, 12.879721],
	'文莱': [114.727669, 4.535277],
	'越南': [108.277199, 14.058324],
	'老挝': [102.495496, 19.85627],
	'缅甸': [95.956223, 21.913965],
	'柬埔寨': [104.990963, 12.565679],
	'新加坡': [103.51, 1.17],
	//一带一路
	'广州': [113.5107, 23.2196],
	'中国': [116.40, 39.90],
	'蒙古': [103.846656, 46.862496],
	'俄罗斯': [105.318756, 61.52401],
	'东帝汶': [125.727539, -8.874217],
	'印度': [78.96288, 20.593684],
	'巴基斯坦': [69.34511599999999, 30.375321],
	'孟加拉国': [90.356331, 23.684994],
	'斯里兰卡': [80.77179699999999, 7.873053999999999],
	'阿富汗': [67.709953, 33.93911],
	'尼泊尔': [84.12400799999999, 28.394857],
	'马尔代夫': [73.5, 4.2],
	'不丹': [90.433601, 27.514162],
	'沙特阿拉伯': [45.079162, 23.885942],
	'阿联酋': [53.847818, 23.424076],
	'阿曼': [55.923255, 21.512583],
	'伊朗': [53.688046, 32.427908],
	'土耳其': [35.243322, 38.963745],
	'以色列': [34.851612, 31.046051],
	'埃及': [30.802498, 26.820553],
	'科威特': [47.481766, 29.31166],
	'伊拉克': [43.679291, 33.223191],
	'卡塔尔': [51.183884, 25.354826],
	'约旦': [36.238414, 30.585164],
	'黎巴嫩': [35.862285, 33.854721],
	'巴林': [50.36, 26.12],
	'也门': [48.516388, 15.552727],
	'叙利亚': [38.996815, 34.80207499999999],
	'巴勒斯坦': [34.28, 31.30],
	'波兰': [19.145136, 51.919438],
	'罗马尼亚': [24.96676, 45.943161],
	'捷克共和国': [15.472962, 49.81749199999999],
	'斯洛伐克': [19.699024, 48.669026],
	'保加利亚': [25.48583, 42.733883],
	'匈牙利': [19.503304, 47.162494],
	'拉脱维亚': [24.603189, 56.879635],
	'立陶宛': [23.881275, 55.169438],
	'斯洛文尼亚': [14.995463, 46.151241],
	'爱沙尼亚': [25.013607, 58.595272],
	'克罗地亚': [15.2, 45.1],
	'阿尔巴尼亚': [20.168331, 41.153332],
	'塞尔维亚': [21.005859, 44.016521],
	'马其顿': [21.745275, 41.608635],
	'波黑': [43.52, 18.26],
	'黑山': [19.37439, 42.708678],
	'哈萨克斯坦': [66.923684, 48.019573],
	'乌兹别克斯坦': [64.585262, 41.377491],
	'土库曼斯坦': [59.556278, 38.969719],
	'吉尔吉斯斯坦': [74.766098, 41.20438],
	'塔吉克斯坦': [71.276093, 38.861034],
	'乌克兰': [31.16558, 48.379433],
	'白俄罗斯': [27.953389, 53.709807],
	'格鲁吉亚': [43.356892, 42.315407],
	'阿塞拜疆': [47.576927, 40.143105],
	'亚美尼亚': [45.038189, 40.069099],
	'摩尔多瓦': [28.369885, 47.411631],
	//欧美国家
	'挪威': [8.468945999999999, 60.47202399999999],
	'丹麦': [9.501785, 56.26392],
	'瑞典': [18.643501, 60.12816100000001],
	'芬兰': [25.748151, 61.92410999999999],
	'英国': [-3.435973, 55.378051],
	'荷兰': [5.291265999999999, 52.132633],
	'爱尔兰': [-8.24389, 53.41291],
	'比利时': [4.469936, 50.503887],
	'卢森堡': [6.129582999999999, 49.815273],
	'法国': [2.213749, 46.227638],
	'西班牙': [-3.74922, 40.46366700000001],
	'葡萄牙': [-8.224454, 39.39987199999999],
	'德国': [10.451526, 51.165691],
	'奥地利': [14.550072, 47.516231],
	'瑞士': [8.227511999999999, 46.818188],
	'美国': [-95.712891, 37.09024],
	'加拿大': [-102.646409, 59.994255],
	'澳大利亚': [133.775136, -25.274398],
	'新西兰': [174.885971, -40.900557]
};

// 东盟10国
var DMData = [
	[{
		name: '中国'
	}, {
		name: "马来西亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "印度尼西亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "泰国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "菲律宾",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "文莱",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "越南",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "老挝",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "缅甸",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "柬埔寨",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "新加坡",
		value: 30
	}]
];
//一带一路
var D1LData = [
	[{
		name: '中国'
	}, {
		name: "蒙古",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "俄罗斯",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "东帝汶",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "印度",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "巴基斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "孟加拉国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "斯里兰卡",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "阿富汗",
		value: 30
	}],
	[{
		name: '广州'
	}, {
		name: "尼泊尔",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "马尔代夫",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "不丹",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "沙特阿拉伯",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "阿联酋",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "阿曼",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "伊朗",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "土耳其",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "以色列",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "埃及",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "科威特",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "伊拉克",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "卡塔尔",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "约旦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "黎巴嫩",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "巴林",
		value: 30
	}],
	[{
		name: '广州'
	}, {
		name: "也门",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "叙利亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "巴勒斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "波兰",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "罗马尼亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "捷克共和国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "斯洛伐克",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "保加利亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "匈牙利",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "拉脱维亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "立陶宛",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "斯洛文尼亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "爱沙尼亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "克罗地亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "阿尔巴尼亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "塞尔维亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "马其顿",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "波黑",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "黑山",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "哈萨克斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "乌兹别克斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "土库曼斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "吉尔吉斯斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "塔吉克斯坦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "乌克兰",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "白俄罗斯",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "格鲁吉亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "阿塞拜疆",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "亚美尼亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "摩尔多瓦",
		value: 30
	}]
];
var OMData = [ //欧美国家
	[{
		name: '中国'
	}, {
		name: "挪威",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "丹麦",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "瑞典",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "芬兰",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "英国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "荷兰",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "爱尔兰",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "比利时",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "卢森堡",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "法国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "西班牙",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "葡萄牙",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "德国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "奥地利",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "瑞士",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "美国",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "加拿大",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "澳大利亚",
		value: 30
	}],
	[{
		name: '中国'
	}, {
		name: "新西兰",
		value: 30
	}]
];

完整的demo

<!DOCTYPE html>
<html>
	<head>
		<title>demo | vue-amap</title>
		<meta charset="UTF-8">
	</head>
	<style scoped="">
		html,
		body {
			margin: 0;
			padding: 0;
		}

		#echartsMap {
			width: 1920px;
			height: 1080px;

		}

		.map-wrapper {
			background-color: #101724;
			display: flex;
			width: 100%;
			height: 100vh;
			align-items: center;
			justify-content: center;
		}
	</style>
	<body>
		<div class="map-wrapper">
			<div id="echartsMap"></div>
		</div>
	</body>
	<!-- 引入组件库 -->
	<script src="echarts.min.js"></script>
	<script src="world.js"></script>
	<script>
		let chart = echarts.init(document.getElementById('echartsMap'));
		/*
		    图中相关城市经纬度,根据你的需求添加数据
		    关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
		*/
		var geoCoordMap = {
			//东盟十国
			'广州': [113.5107, 23.2196],
			'马来西亚': [101.975766, 4.210484],
			'印度尼西亚': [113.921327, -0.789275],
			'泰国': [100.992541, 15.870032],
			'菲律宾': [121.774017, 12.879721],
			'文莱': [114.727669, 4.535277],
			'越南': [108.277199, 14.058324],
			'老挝': [102.495496, 19.85627],
			'缅甸': [95.956223, 21.913965],
			'柬埔寨': [104.990963, 12.565679],
			'新加坡': [103.51, 1.17],
			//一带一路
			'广州': [113.5107, 23.2196],
			'中国': [116.40, 39.90],
			'蒙古': [103.846656, 46.862496],
			'俄罗斯': [105.318756, 61.52401],
			'东帝汶': [125.727539, -8.874217],
			'印度': [78.96288, 20.593684],
			'巴基斯坦': [69.34511599999999, 30.375321],
			'孟加拉国': [90.356331, 23.684994],
			'斯里兰卡': [80.77179699999999, 7.873053999999999],
			'阿富汗': [67.709953, 33.93911],
			'尼泊尔': [84.12400799999999, 28.394857],
			'马尔代夫': [73.5, 4.2],
			'不丹': [90.433601, 27.514162],
			'沙特阿拉伯': [45.079162, 23.885942],
			'阿联酋': [53.847818, 23.424076],
			'阿曼': [55.923255, 21.512583],
			'伊朗': [53.688046, 32.427908],
			'土耳其': [35.243322, 38.963745],
			'以色列': [34.851612, 31.046051],
			'埃及': [30.802498, 26.820553],
			'科威特': [47.481766, 29.31166],
			'伊拉克': [43.679291, 33.223191],
			'卡塔尔': [51.183884, 25.354826],
			'约旦': [36.238414, 30.585164],
			'黎巴嫩': [35.862285, 33.854721],
			'巴林': [50.36, 26.12],
			'也门': [48.516388, 15.552727],
			'叙利亚': [38.996815, 34.80207499999999],
			'巴勒斯坦': [34.28, 31.30],
			'波兰': [19.145136, 51.919438],
			'罗马尼亚': [24.96676, 45.943161],
			'捷克共和国': [15.472962, 49.81749199999999],
			'斯洛伐克': [19.699024, 48.669026],
			'保加利亚': [25.48583, 42.733883],
			'匈牙利': [19.503304, 47.162494],
			'拉脱维亚': [24.603189, 56.879635],
			'立陶宛': [23.881275, 55.169438],
			'斯洛文尼亚': [14.995463, 46.151241],
			'爱沙尼亚': [25.013607, 58.595272],
			'克罗地亚': [15.2, 45.1],
			'阿尔巴尼亚': [20.168331, 41.153332],
			'塞尔维亚': [21.005859, 44.016521],
			'马其顿': [21.745275, 41.608635],
			'波黑': [43.52, 18.26],
			'黑山': [19.37439, 42.708678],
			'哈萨克斯坦': [66.923684, 48.019573],
			'乌兹别克斯坦': [64.585262, 41.377491],
			'土库曼斯坦': [59.556278, 38.969719],
			'吉尔吉斯斯坦': [74.766098, 41.20438],
			'塔吉克斯坦': [71.276093, 38.861034],
			'乌克兰': [31.16558, 48.379433],
			'白俄罗斯': [27.953389, 53.709807],
			'格鲁吉亚': [43.356892, 42.315407],
			'阿塞拜疆': [47.576927, 40.143105],
			'亚美尼亚': [45.038189, 40.069099],
			'摩尔多瓦': [28.369885, 47.411631],
			//欧美国家
			'挪威': [8.468945999999999, 60.47202399999999],
			'丹麦': [9.501785, 56.26392],
			'瑞典': [18.643501, 60.12816100000001],
			'芬兰': [25.748151, 61.92410999999999],
			'英国': [-3.435973, 55.378051],
			'荷兰': [5.291265999999999, 52.132633],
			'爱尔兰': [-8.24389, 53.41291],
			'比利时': [4.469936, 50.503887],
			'卢森堡': [6.129582999999999, 49.815273],
			'法国': [2.213749, 46.227638],
			'西班牙': [-3.74922, 40.46366700000001],
			'葡萄牙': [-8.224454, 39.39987199999999],
			'德国': [10.451526, 51.165691],
			'奥地利': [14.550072, 47.516231],
			'瑞士': [8.227511999999999, 46.818188],
			'美国': [-95.712891, 37.09024],
			'加拿大': [-102.646409, 59.994255],
			'澳大利亚': [133.775136, -25.274398],
			'新西兰': [174.885971, -40.900557]
		};

		// 东盟10国
		var DMData = [
			[{
				name: '中国'
			}, {
				name: "马来西亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "印度尼西亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "泰国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "菲律宾",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "文莱",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "越南",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "老挝",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "缅甸",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "柬埔寨",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "新加坡",
				value: 30
			}]
		];
		//一带一路
		var D1LData = [
			[{
				name: '中国'
			}, {
				name: "蒙古",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "俄罗斯",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "东帝汶",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "印度",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "巴基斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "孟加拉国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "斯里兰卡",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿富汗",
				value: 30
			}],
			[{
				name: '广州'
			}, {
				name: "尼泊尔",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "马尔代夫",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "不丹",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "沙特阿拉伯",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿联酋",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿曼",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "伊朗",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "土耳其",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "以色列",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "埃及",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "科威特",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "伊拉克",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "卡塔尔",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "约旦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "黎巴嫩",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "巴林",
				value: 30
			}],
			[{
				name: '广州'
			}, {
				name: "也门",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "叙利亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "巴勒斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "波兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "罗马尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "捷克共和国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "斯洛伐克",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "保加利亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "匈牙利",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "拉脱维亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "立陶宛",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "斯洛文尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "爱沙尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "克罗地亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿尔巴尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "塞尔维亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "马其顿",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "波黑",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "黑山",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "哈萨克斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "乌兹别克斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "土库曼斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "吉尔吉斯斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "塔吉克斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "乌克兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "白俄罗斯",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "格鲁吉亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿塞拜疆",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "亚美尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "摩尔多瓦",
				value: 30
			}]
		];
		var OMData = [ //欧美国家
			[{
				name: '中国'
			}, {
				name: "挪威",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "丹麦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "瑞典",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "芬兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "英国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "荷兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "爱尔兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "比利时",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "卢森堡",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "法国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "西班牙",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "葡萄牙",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "德国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "奥地利",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "瑞士",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "美国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "加拿大",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "澳大利亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "新西兰",
				value: 30
			}]
		];

		// 小飞机的图标，可以用其他图形替换
		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';

		// 获取地图中起点和终点的坐标，以数组形式保存下来
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var dataItem = data[i];
				var fromCoord = geoCoordMap[dataItem[0].name];
				var toCoord = geoCoordMap[dataItem[1].name];
				if (fromCoord && toCoord) {
					res.push([{
						coord: fromCoord // 起点坐标
					}, {
						coord: toCoord // 终点坐标
					}])
				}
			}
			return res;
		}

		var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
		var series = []; // 用来存储地图数据

		[
			//['中国', DMData],
			//['中国', D1LData]
			['中国', OMData]
		].forEach(function(item, i) {
			series.push({
				// 白色航线特效图
				type: 'lines',
				zlevel: 1, // 用于分层，z-index的效果
				effect: {
					show: true, // 动效是否显示
					period: 6, // 特效动画时间
					trailLength: 0.7, // 特效尾迹的长度
					color: '#fff', // 特效颜色
					symbolSize: 3 // 特效大小
				},
				lineStyle: {
					normal: { // 正常情况下的线条样式
						color: color[0],
						width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
						curveness: -0.2 // 线条曲度
					}
				},
				data: convertData(item[1]) // 特效的起始、终点位置
			}, { // 小飞机航线效果
				type: 'lines',
				zlevel: 2,
				//symbol: ['none', 'arrow'],   // 用于设置箭头
				symbolSize: 10,
				effect: {
					show: true,
					period: 6,
					trailLength: 0,
					// symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
					symbolSize: 5
				},
				lineStyle: {
					normal: {
						color: color[0],
						width: 1,
						opacity: 0.6,
						curveness: -0.2
					}
				},
				data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
			}, { // 散点效果
				type: 'effectScatter',
				coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
				zlevel: 3,
				rippleEffect: {
					brushType: 'stroke' // 波纹绘制效果
				},
				label: {
					normal: { // 默认的文本标签显示样式
						show: true,
						position: 'left', // 标签显示的位置
						formatter: '{b}' // 标签内容格式器
					}
				},
				itemStyle: {
					normal: {
						color: color[0]
					}
				},
				data: item[1].map(function(dataItem) {
					return {
						name: dataItem[1].name,
						value: geoCoordMap[dataItem[1].name], // 起点的位置
						symbolSize: dataItem[1].value / 4, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
					};
				})
			});
		});

		// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
		series.push({
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 3,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'left',
					formatter: '{b}'
				}
			},
			symbolSize: function(val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: color[1]
				}
			},
			data: [{
				name: '中国',
				value: [116.46, 39.92, 30],
				label: {
					normal: {
						position: 'right'
					}
				}
			}]
		});

		// 最后初始化世界地图中的相关数据
		chart.setOption({
			backgroundColor: '#101724',
			title: {
				//text: '中国国际贸易促进委员会',
				//subtext: '国别资讯',
				textStyle: {
					color: '#fff',
					fontSize: 20
				},
				top: '10px',
				left: '10px'
			},
			geo: {
				map: 'world', // 与引用进来的地图js名字一致
				roam: false, // 禁止缩放平移
				itemStyle: { // 每个区域的样式
					normal: {
						areaColor: '#7d7d7d'
					},
					emphasis: {
						areaColor: '#2a333d'
					}
				},
				regions: [{ // 选中的区域
					name: 'China',
					selected: false,
					itemStyle: { // 高亮时候的样式
						emphasis: {
							areaColor: '#7d7d7d'
						}
					},
					label: { // 高亮的时候不显示标签
						emphasis: {
							show: false
						}
					}
				}]
			},
			series: series, // 将之前处理的数据放到这里
			textStyle: {
				fontSize: 12
			}
		});
	</script>
</html>

Implicitpawn / worldmap

echarts 实现世界地图地域流向炫酷效果

实现世界地图地域流向炫酷效果主要步骤：

简介

发行版

贡献者

近期动态

Implicitpawn / worldmap .gitee-modal { width: 500px !important; }

echarts 实现世界地图地域流向炫酷效果

实现世界地图地域流向炫酷效果主要步骤：

简介

发行版

贡献者

近期动态

搜索帮助

Implicitpawn / worldmap