Echarts实现海南地图城市坐标动态流向图

Echarts实现海南地图城市坐标动态流向图

Js写法:


	var myChart = echarts.init(document.getElementById('ditu'));
	// 数据格式 地图上标点为citys,value为经纬度,symbolSize为标记点的大小
	// 数据格式 moveLines,fromName为线条出发城市,toName为线条到达城市,coords为数组经纬度,第一个为出发点经纬度,第二个为到达点经纬度
	var allData = {"citys":[
		{"name":"海口市","value":[110.33119, 20.031971,2],"symbolSize":11,"itemStyle":{"normal":{"color":"#F58158"}}},
        {"name":"三亚市","value":[109.508268, 18.247872,2],"symbolSize":12,"itemStyle":{"normal":{"color":"#F58158"}}},
        {"name":"儋州市","value":[109.576782, 19.517486,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"文昌市","value":[110.753975, 19.612986,4],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"琼海市","value":[110.466785, 19.246011,4],"symbolSize":12,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"东方市","value":[108.653789, 19.10198,4],"symbolSize":13,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"万宁市","value":[110.388793, 18.796216,4],"symbolSize":12,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"五指山市","value":[109.516662, 18.776921,4],"symbolSize":12,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"定安县","value":[110.349235, 19.684966,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"屯昌县","value":[110.102773, 19.362916,4],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"琼中县","value":[109.839996, 19.03557,4],"symbolSize":5,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"澄迈县","value":[110.007147, 19.737095,4],"symbolSize":16,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"临高县","value":[109.687697, 19.908293,4],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"白沙县","value":[109.452606, 19.224584,4],"symbolSize":6,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"昌江县","value":[109.053351, 19.260968,4],"symbolSize":7,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"乐东县","value":[109.175444, 18.74758,4],"symbolSize":15,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"保亭县","value":[109.70245, 18.636371,4],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},
		{"name":"陵水县","value":[110.037218, 18.505006,4],"symbolSize":18,"itemStyle":{"normal":{"color":"#F58158"}}}
		
		],
        
      "moveLines":[
		{"fromName":"海口市","toName":"陵水县","coords":[[110.037218, 18.505006],[110.037218, 18.505006]]},
		{"fromName":"三亚市","toName":"陵水县","coords":[[109.508268, 18.247872],[110.037218, 18.505006]]},
		{"fromName":"儋州市","toName":"陵水县","coords":[[109.576782, 19.517486],[110.037218, 18.505006]]},
		{"fromName":"文昌市","toName":"陵水县","coords":[[110.753975, 19.612986],[110.037218, 18.505006]]},
		{"fromName":"琼海市","toName":"陵水县","coords":[[110.466785, 19.246011],[110.037218, 18.505006]]},
		{"fromName":"东方市","toName":"陵水县","coords":[[108.653789, 19.10198],[110.037218, 18.505006]]},
		{"fromName":"万宁市","toName":"陵水县","coords":[[110.388793, 18.796216],[110.037218, 18.505006]]},
		{"fromName":"五指山市","toName":"陵水县","coords":[[109.516662, 18.776921],[110.037218, 18.505006]]},
		{"fromName":"定安县","toName":"陵水县","coords":[[110.349235, 19.684966],[110.037218, 18.505006]]},
		{"fromName":"屯昌县","toName":"陵水县","coords":[[110.102773, 19.362916],[110.037218, 18.505006]]},
		{"fromName":"琼中县","toName":"陵水县","coords":[[109.839996, 19.03557],[110.037218, 18.505006]]},
		{"fromName":"澄迈县","toName":"陵水县","coords":[[110.007147, 19.737095],[110.037218, 18.505006]]},
		{"fromName":"临高县","toName":"陵水县","coords":[[109.687697, 19.908293],[110.037218, 18.505006]]},
		{"fromName":"白沙县","toName":"陵水县","coords":[[109.452606, 19.224584],[110.037218, 18.505006]]},
		{"fromName":"昌江县","toName":"陵水县","coords":[[109.053351, 19.260968],[110.037218, 18.505006]]},
		{"fromName":"乐东县","toName":"陵水县","coords":[[109.175444, 18.74758],[110.037218, 18.505006]]},
		{"fromName":"保亭县","toName":"陵水县","coords":[[109.70245, 18.636371],[110.037218, 18.505006]]},
		{"fromName":"陵水县","toName":"陵水县","coords":[[110.037218, 18.505006],[110.037218, 18.505006]]}
		
        ],
	};
		
	option = {
		backgroundColor: '#8ea8cf', // 地图背景颜色
		title: {
			text: '海南迁徙图', // 地图标题设置
            subtext:"Linwute.com", // 地图小标题设置
            sublink:"http://www.linwute.com", //小标题链接
            target:"blank", //'self' 当前窗口打开,'blank' 新窗口打开
            padding:5, // 标题内边距 5  [5, 10]  [5,10,5,10]
            left:"center", // 组件离容器左侧的距离,'left', 'center', 'right','20%'
            top:"5%", // 组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
            right:"auto", // 组件离容器右侧的距离,'20%'
            bottom:"auto", // 组件离容器下侧的距离,'20%'
			
			textStyle: {
              color:"#fff", //文字颜色
              fontStyle:"normal", // italic斜体  oblique倾斜
              fontWeight:"normal", // 文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
              fontFamily:"sans-serif", // 字体系列
              fontSize:18 // 字体大小
			  
			}
		},
		legend: { // 右下角图例
			show: true, // 是否显示 true/false
			orient: 'vertical', // 图例排列方向
			top: 'bottom', // 位置
			left: 'right', // 位置
			data: ['地点', '线路'], // 数据
			textStyle: { // 文字设置
				color: '#fff'
				
			}
		},
		geo: {
            show:true, // 是否显示
			map: '海南', // 地图类型。world世界地图,china中国地图
          // center:[115.97, 29.71], //当前视角的中心点,用经纬度表示
			label: {
              normal:{ //普通状态下的标签文本样式。(省份名称)
                show: true, //是否在普通状态下显示标签true/false。
				
                textStyle: { // 文字设置
                  color: '#fff'
				  
                },
              },
			  
			 
              emphasis: { // 是否在高亮状态下显示标签。(省份名称)
                show: true,
				
                textStyle: { // 文字设置
                  color: '#fff'
				  
                },
              }
			},
			roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
			itemStyle: { // 地图板块区域的多边形 图形样式
				normal: { // 默认板块信息
					areaColor: 'transparent', //地图透明背景
					borderColor: '#bf465c',
					
				},
				emphasis: { // 高亮版板块信息
					areaColor: '#1666c0',
					
				}
			}
		},
		
		series: [{
			name: '地点',
			type: 'effectScatter', // 特效散点图
			
			coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
			zlevel: 2, // 所有图形的 zlevel 值。
			rippleEffect: { //涟漪特效相关配置。
				brushType: 'stroke', //波纹的绘制方式,可选 'stroke' 和 'fill'。
                period:4, // 动画的时间。
                scale:2.5, // 动画中波纹的最大缩放比例。
				
			},
			label: {
                normal: {
                  show: false,                  //是否显示标签。
                  position: "inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
                  offset: [30, 40],             //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
                  formatter: '{b}: {c}',       //标签内容格式器。模板变量有 {a}、{b}、{c},分别表示系列名,数据名,数据值。
                },
				emphasis: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbolSize: 2, // 标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
			showEffectOn: 'render', // 配置何时显示特效。可选:'render' 绘制完成后显示特效。'emphasis' 高亮(hover)的时候显示特效。
			itemStyle: { // 图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
				normal: {
					color: '#46bee9',
					
				}
			},
			data: allData.citys
		}, {
			name: '线路',
			type: 'lines',
			coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
			zlevel: 2,
			large: true, // 是否开启大规模散点图的优化,在数据图形特别多的时候(>=5k)可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点:优化后不能自定义设置单个数据项的样式。
			effect: {
				show: true,
				constantSpeed: 30, // 点移动的速度
				symbol: 'pin',  // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				symbolSize: 3, // 标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
				trailLength: 0, // 线的宽度
				
			},
			lineStyle: { // 线的颜色、宽度,样式设置
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0, color: '#bdd121'
					}, {
						offset: 1, color: '#F58158'
					}], false),
					width: 2, // 线的宽度
					opacity: 0.5, // 线的透明度
					curveness: 0.1 // 线的完全程度
					
				}
			},
			data: allData.moveLines
		}]
	};
	myChart.setOption(option);

HTML 写法:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .map {
            width: 100%;
            height: 31.25rem;
            margin: 0 auto;
        }
		/* 设置高度和margin 才能让地图显示出来 */
    </style>
</head>
<body>
<!--    设置地图容器,需要设置宽高样式-->
	<div id="ditu" class="map"></div>
</body>
<script src="./js/echarts.min.js"></script>
<script src="./js/hainan.js"></script>
<script src="./js/ditu.js" type="text/javascript" charset="utf-8"></script>
</html>

整个文件zip压缩包:

265 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。