中国航线地图

梦兮呀

于 2024-01-02 20:31:55 发布

阅读量414

点赞数 7

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135349429

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>航线地图</title>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/china.js"></script>
	</head>
	<body>
		
		<div id="main" style="width: 800px; height:600px;"></div>
		<script type="text/javascript">
			
			// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		
		var option = {
				geo:{
					type:'map',
					map:'china',
				},
				series:[
					{
						// 路径图
						type:'lines',
						// 线两端的标记类型，none全无，arrow箭头
						Symbol:['none','arrow'],
						// 图形中线的样式
						lineStyle:{
							// 颜色
							color:'blue',
							// 图形透明度
							opacity:0.6,
							// 边的曲度
							curveness:0.2
						},
						// 线特效的配置
						effect:{
							show:true,
							// 特效动画的时间
							period:6,
							// 特效尾迹的长度，取从 0 到 1 的值，数值越大尾迹越长。
							trailLength:0,
							
							// 图形的大小
							symbolSize:12,
							// 飞机图形
							symbol:'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'
						},
						data:[
							{
								coords:[
									[116.46,39.92],
									[108.33,22.84]
								]
							},
							{
								coords:[
								[116.46,39.92],
								[87.68,43.77]
								]
							}
						]
					},
					{
						type:'scatter',
						data:[
							{name:'南宁',value:[108.33,22.84]},
							{name:'乌鲁木齐',value:[87.68,43.77]},
						],
						// 使用的坐标系为地图geo
						coordinateSystem:'geo',
						// 散点颜色
						itemStyle:{
							color:'red'
						},
						// 散点大小
						symbolSize:function(args){
							// console.log(arg);
							return 10;
						}
					},
					{
						// 带有涟漪特效动画的散点（气泡）图
						type:'effectScatter',
						data:[
							{name:'北京',value:[116.46,39.92]}
						],
						// 使用的坐标系为地图geo
						coordinateSystem:'geo',
						// 散点颜色
						itemStyle:{
							color:'red'
						},
						// 涟漪特效相关配置
						rippleEffect:{
							// 动画中波纹的最大缩放比例
							scale:3
						}
					}
				]
			};
		
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		</script>
		
	</body>
</html>