使用echarts做以地图为基础坐标系的动态流向图

话不多说，先上效果图

流入量图

流出量图

html代码片段

        <div id="mapid" style="height:500px;width:500px;border:1px solid red;padding:5px;"></div>

所需js文件

<script src="../../js/common/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/common/echarts.min.js"></script>
<script src="../../json/heilongjiang.js"></script>

后台接口返回的数据结构如下：

var data = [
	{
		startLat: "45.165732",
		startLng: "126.139283",
		tollStationName: "总1",
		totalType: '12345',
		list: [
			{
				fromToTollStationName: "总1-1",
				startLat: "45.508675",
				startLng: "126.513409",
				trafficFlow: 123
			},
			{
				fromToTollStationName: "总1-2",
				startLat: "45.386216",
				startLng: "126.410610",
				trafficFlow: 12345
			},
			{
				freight: 93353350,
				fromToTollStationName: "总1-3)",
				startLat: "46.165732",
				startLng: "126.139283",
				trafficFlow: 6933570
			}
		]
	},
	{
		startLat: "47.993455",
		startLng: "123.486567",
		tollStationName: "总2",
		totalType: '12345',
		list:[
			{
				fromToTollStationName: "总2-1",
				startLat: "45.508675",
				startLng: "126.513409",
				trafficFlow: 1234
			},
			{
				fromToTollStationName: "总2-2",
				startLat: "47.293455",
				startLng: "123.486567",
				trafficFlow: 11111
			},
			{
				fromToTollStationName: "总2-3",
				startLat: "45.177807",
				startLng: "126.174966",
				trafficFlow: 4321
			}
			]
		},
		{
			startLat: "47.342922",
			startLng: "124.086943",
			tollStationName: "总3",
			totalType: '12345',
			list:[
				{
					fromToTollStationName: "总3-1",
					startLat: "47.442922",
					startLng: "124.086943",
					trafficFlow: 2321
				},
				{
					fromToTollStationName: "总3-2",
					startLat: "47.292132",
					startLng: "124.520282",
					trafficFlow: 12345
				},
				{
					fromToTollStationName: "总3-3",
					startLat: "47.153795",
					startLng: "124.878718",
					trafficFlow: 54321
				}
			]
	}
]

在画图之前，先整理一下数据，调用下面方法

function resetData (data,type) {
	// data代表返回的数据
	// type为1，流入；type为2 流出。
	let result = {
			totalType: '',//总的为流入还是流出
			falseTotalType: '',//totalType为lr，则falseTotalType为lc；反之为lr
			linesData: [],
			effectScatterData: []
		}
	if(type == 1){
		result.totalType = 'lr';
		result.falseTotalType = 'lc'
	}else{
		result.totalType = 'lc';
		result.falseTotalType = 'lr'
	}
	data.forEach((item,index)=>{
		result.effectScatterData.push({
			type: result.totalType,
			i: index+1,
			traffiFlow: item.tollStationCount,
			name: item.tollStationName,
			value: [item.startLng,item.startLat]
		})
		item.list.forEach((el,i)=>{
			if(i<3){//由于只需要显示前三名的地点，所以取前三个就可以
				if(type == 1){//判断是流入图还是流出图，1为流入
					result.linesData.push({
						fromName: el.fromToTollStationName,//开始地点name
						toName: item.tollStationName,//目的地地点name
						coords: [
							[el.startLng,el.startLat],//开始地点的坐标
							[item.startLng,item.startLat]//目的地的坐标
						]
					})
				}else{//流出的话，就调换开始和结束的位置即可
					result.linesData.push({
						fromName: item.tollStationName,
						toName: el.fromToTollStationName,
						coords: [
							[item.startLng,item.startLat],
							[el.startLng,el.startLat]
						]
					})
				}
				result.effectScatterData.push({//这里就是把所有的要标注的位置给集合一下，不管是流入还是流出
					type: result.falseTotalType,
					i:i+1,
					traffiFlow: el.trafficFlow,
					name: el.fromToTollStationName,
					value: [el.startLng,el.startLat]
				})
			}
		})
	})
	return result
}

 

开始画图：

var mapEcharts ;//定义一下全局画图对象
function setgreenCarRoute(data,contype) {
	let mapdata = resetData(data,contype);//画图之前调用该方法，整理后台返回数据，获得最终所需数据
    
	if (mapEcharts != null && mapEcharts != "" && mapEcharts != undefined) {
		mapEcharts .dispose(); //销毁
	}
	mapEcharts = echarts.init(document.getElementById('mapid'));
	let option = {
		tooltip: {
			formatter: function (params) {
				return params.data.name + params.data.traffiFlow//这里是鼠标移入每个标志点所显示的文字内容
			}	
		},
		geo: {
            map: '黑龙江',
	        zoom: 1.1,
	        aspectScale: 0.75, //地图长度比
	        roam: false,  //  鼠标缩放和 平移漫游
	        itemStyle: {
		        normal: {
			        areaColor: '#6ea5f7',
			        label: {
				        show: false
			        },
		        },
		        emphasis: {
			        show: true,
			        areaColor: '#1a7bbf',
			        label: {
				        show: false,
				        textStyle: {
					        color: 'red'
				        }
			        }
		        }
            }
        },
		series: [
		    {
			    name: '',
			    type: 'lines',//在 地理坐标系上画线图
			    zlevel: 2,
			    symbolSize: 10,
			    effect: {
				    show: true,
				    period: 6,
				    trailLength: 0,
				    symbol: 'arrow',
				    symbolSize: 10,
			    },
			    lineStyle: {
				    normal: {
					    color: '#feb43b',
					    width: 1,
					    opacity: 0.6,
					    curveness: 0.2
				    }
			    },
			    data: mapdata.linesData
		    }, 
		    {
			    name: '',
			    type: 'effectScatter', //在地理坐标系画出所有的标志点
			    coordinateSystem: 'geo', 
			    zlevel: 3,
			    rippleEffect: {
				    brushType: 'stoke'
			    },
			    label: {
				    normal: {
					    show: true,
					    position: 'inside',
					    formatter: function(params){//由于项目需要，只需要显示所有总的数据的标志点文字，也就是图上的圈1,2,3
						    if(params.data.type === mapdata.totalType){
							    return params.data.i
						    }else{
							    return ''
						    }
					    }
				    }
			    },
			    symbol:'circle',
			    symbolSize:function(value,params) {
				    if(params.data.type === mapdata.totalType){//标志点的大小
					    return 20
				    }else{
					    return 10
				    }
			    },
			    itemStyle: {
				    normal: {
					    color: '#feb43b',
					    borderColor: "white",
				    }
			    },
			    data: mapdata.effectScatterData
		    }]
	    }
	    if (option && typeof option === "object") {
		    mapEcharts .setOption(option, true);
	    }
}

完成。