python， echarts 实现世界地图地域流向地图

bug me

已于 2022-12-24 23:05:23 修改

阅读量1.2k

点赞数

文章标签： echarts 前端 javascript

于 2022-12-23 21:58:55 首次发布

本文链接：https://blog.csdn.net/qq_44856617/article/details/128424627

版权

实现地图地域流发向图主要步骤

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.