echarts迁徙图 将天地图作为底图

在这里插入图片描述

//迁徙图
	function setMap(item){
		if (typeof(item.F_FromPoint) == "undefined")
		{
		    return;
		}
		var ffromlatlong = item.F_FromPoint.slice(7,item.F_FromPoint.length - 1).split(' ');
		var ftolong = item.F_ToPoint.slice(7,item.F_ToPoint.length - 1).split(' ');
		var ffromArr = [parseFloat(ffromlatlong[0]), parseFloat(ffromlatlong[1])];
		var ftoArr = [parseFloat(ftolong[0]), parseFloat(ftolong[1])];
		var centeratArr = [(parseFloat(ffromlatlong[0]) + parseFloat(ftolong[0]))/2, (parseFloat(ffromlatlong[1]) + parseFloat(ftolong[1]))/2];
		map.setView(L.latLng(parseFloat(centeratArr[1]), parseFloat(centeratArr[0])), 11);
		var overlay = new L.echartsLayer3(map, echarts);
		var chartsContainer = overlay.getEchartsContainer();
		var myChart = overlay.initECharts(chartsContainer);
	    var chinaGeoCoordMap = {
			[item.F_From]: ffromArr,
			[item.F_To]: ftoArr
		};
		var chinaDatas = [
			[{
				name: item.F_From,
				value: 0
			}],	[{
				name: item.F_To,
				value: 0
			}]
		];
	
		var convertData = function(data) {
			var res = [];
			for(var i = 0; i < data.length; i++) {
				var dataItem = data[i];
				var fromCoord = chinaGeoCoordMap[dataItem[0].name];
				var toCoord = ftoArr;
				if(fromCoord && toCoord) {
					res.push([{
						coord: fromCoord,
						value: dataItem[0].value
					}, {
						coord: toCoord,
					}]);
				}
			}
			return res;
		};
		var series = [];
		[[item.F_To, chinaDatas]].forEach(function(item, i) {
			series.push({
					type: 'lines',
					zlevel: 2,
					effect: {
						show: true,
						period: 4, //箭头指向速度,值越小速度越快
						trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
						symbol: 'arrow', //箭头图标
						symbolSize: 5, //图标大小
					},
					lineStyle: {
						normal: {
							width: 1, //尾迹线条宽度
							opacity: 1, //尾迹线条透明度
							curveness: .3 //尾迹线条曲直度
						}
					},
					data: convertData(item[1])
				}, {
					type: 'effectScatter',
					coordinateSystem: 'geo',
					zlevel: 2,
					rippleEffect: { //涟漪特效
						period: 4, //动画时间,值越小速度越快
						brushType: 'stroke', //波纹绘制方式 stroke, fill
						scale: 4 //波纹圆环最大限制,值越大波纹越大
					},
					label: {
						normal: {
							show: true,
							position: 'right', //显示位置
							offset: [5, 0], //偏移设置
							formatter: function(params){//圆环显示文字
								return params.data.name;
							},
							fontSize: 13
						},
						emphasis: {
							show: true
						}
					},
					symbol: 'circle',
					symbolSize: function(val) {
						return 5+ val[2] * 5; //圆环大小
					},
					itemStyle: {
						normal: {
							show: false,
							color: '#f00'
						}
					},
					data: item[1].map(function(dataItem) {
						return {
							name: dataItem[0].name,
							value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
						};
					}),
				},
				//被攻击点
				{
					type: 'scatter',
					coordinateSystem: 'geo',
					zlevel: 2,
					rippleEffect: {
						period: 4,
						brushType: 'stroke',
						scale: 4
					},
					label: {
						normal: {
							show: true,
							position: 'right',
							//offset:[5, 0],
							color: '#0f0',
//							formatter: '{b}',
							textStyle: {
								color: "#0f0"
							}
						},
						emphasis: {
							show: true,
							color: "#f60"
						}
					},
					symbol: 'pin',
					symbolSize: 50,
					data: [{
						name: item[0]
//						value: chinaGeoCoordMap[item[0]].concat([]),
					}],
				}
			);
		});
	
		option = {
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgba(166, 200, 76, 0.82)',
				borderColor: '#FFFFCC',
				showDelay: 0,
				hideDelay: 0,
				enterable: true,
				transitionDuration: 0,
				extraCssText: 'z-index:100',
				formatter: function(params, ticket, callback) {
					//根据业务自己拓展要显示的内容
					var res = "";
					var name = params.name;
					var value = params.value[params.seriesIndex + 1];
					res = "<span style='color:#fff;'>" + name + "</span><br/>数据:" + value;
					return res;
				}
			},
			backgroundColor:"#013954",
			visualMap: { //图例值控制
				min: 0,
				max: 1,
				calculable: true,
				show: true,
				color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
				textStyle: {
					color: '#fff'
				}
			},
			geo: {
				map: '',
				zoom: 1.2,
				label: {
					emphasis: {
						show: false
					}
				},
				roam: true, //是否允许缩放
				itemStyle: {
					normal: {
						color: 'rgba(51, 69, 89, .5)', //地图背景色
						borderColor: '#516a89', //省市边界线00fcff 516a89
						borderWidth: 1
					},
					emphasis: {
						color: 'rgba(37, 43, 61, .5)' //悬浮背景
					}
				}
			},
			series: series
		};
	    overlay.setOption(option);
	}
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值