echarts（一）之地图连线动效

最新推荐文章于 2024-06-28 08:46:07 发布
最新推荐文章于 2024-06-28 08:46:07 发布
阅读量1w 收藏 17
点赞数 4
分类专栏： Echarts 文章标签： 地图 echarts 北京
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/89874029
版权

效果如下：
在这里插入图片描述
HTML如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>北京地图</title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="js/echarts.js" ></script>
		<script type="text/javascript" src="js/map.js" ></script>
	</head>
	<style>
		html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height:100%;
		}
		.echarts-wrapper{
			width: 100%;
			height:100%;
			margin: auto;
		}
		.echarts-wrapper-china{
			position: absolute;
			bottom: 20px;
			right:20px;
			width: 220px;
			height:160px;
			border: 1px solid #09b8c0;
		}
	</style>
	<body>
		<div class='echarts-wrapper' id="beijing"></div>
		<div class='echarts-wrapper-china' id="china"></div>
	</body>
</html>

map.js如下：

$(function(){
	initBeijing();	
	initChina();
});
function initBeijing(){
	var chart = echarts.init(document.getElementById("beijing"));
    $.getJSON('json/beijing.json', function(data) {
        echarts.registerMap('beijing', data);
        chart.setOption({
            geo : {
                type : 'map',
                map : 'beijing',
                layoutCenter : [ '50%', '50%' ],
                layoutSize : '100%',
                label : {
                    normal : {
                        show : false,
                        textStyle : {
                            color : '#fff'
                        }
                    },
                    emphasis : {
                        show : false,
                        textStyle : {
                            color : '#fff'
                        }
                    }
                },
                itemStyle : {
                    normal : {
                        areaColor : 'rgba(24,65,91,0)',
                        borderColor : '#23a8b3',
                        borderWidth : 1,
                        shadowColor : '#365661',
                        shadowBlur : 10
                    },
                    emphasis : {
                        areaColor : 'rgba(24,65,91,0)'
                    },
                }
            },
            series: [{
				name: '北京行政图',
				type: 'lines',
				zlevel: 2,
				symbol: ['none', 'arrow'],
				symbolSize: 10,
				lineStyle: {
					normal: {
						color: {
						    type: 'linear',
						    x: 0,
						    y: 0,
						    x2: 0,
						    y2: 1,
						    colorStops: [{
						        offset: 0, color: 'rgba(111, 113, 76, 1)' // 0% 处的颜色
						    }, {
						        offset: 1, color: 'rgba(255, 255, 134, 1)'  // 100% 处的颜色
						    }],
						    global: false // 缺省为 false
						},
						width: 1,
						opacity: 0.6,
						curveness: -0.5
					},
					
					
				},
				data: [{
					coords: [
					    [118.4100, 39.6410], 
						[115.9700, 40.4500] //延庆
					]
				},{
				    coords: [
				        [118.4100, 39.6410], 
						[116.6300, 40.3200]//怀柔
					]
				},{
					coords: [
					    [118.4100, 39.6410], 
						[116.8300, 40.3700]//密云县
						
					]
				},{
					coords: [
					    [118.4100, 39.6410], 
						[116.65, 40.1300]//顺义
						
					]
				},{
				    coords: [
				        [118.4100, 39.6410], 
						[116.2800, 39.8500]//丰台区
					]
				},{
				    coords: [
				        [118.4100, 39.6410], 
						[116.2300, 40.2200]//昌平区
					]
				},{
				    coords: [
				        [118.4100, 39.6410], 
						[116.3000, 39.9500]//海淀
					]
				},{
				    coords: [
				        [118.4100, 39.6410], 
						[116.4300, 39.9200]//朝阳
					]
				},{
				    coords: [
				        [118.4100, 39.6410], 
						[116.4200, 39.9300]//东城
					]
				}]
			}, {
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				label: {
					normal: {
						show: true,
						position: 'right',
						formatter: '{b}'
					}
				},
				symbolSize: function(val) {
		            var symbolSize;
		            if (val[2] / 12 >= 6) {
		                symbolSize = 6;
		            } else if (val[2] / 12 <= 3) {
		                symbolSize = 3;
		            } else {
		                symbolSize = val[2] / 12;
		            }
		            return symbolSize;
		        },
				itemStyle: {
					normal: {
						color: '#a6c84c',
					}
				},
				data: [{
				    name: '延庆',
					value: [115.9700, 40.4500] //延庆
				},{
					name: '怀柔',
					value: [116.6300, 40.3200]//怀柔
				}, {
					name: '密云县',
					value: [116.8300, 40.3700]//密云县
				},{
				    name: '顺义',
					value: [116.65, 40.1300]//顺义
				},{
				    name: '丰台区',
					value: [116.2800, 39.8500]//丰台区
				},{
				    name: '昌平区',
					value: [116.2300, 40.2200]//昌平区
				},{
				    name: '海淀',
					value: [116.3000, 39.9500]//海淀
				},{
				    name: '朝阳',
					value: [116.4300, 39.9200]//朝阳
				},{
				    name: '东城',
					value: [116.4200, 39.9300]//东城
				}]
			}]
	    })
    });
    $(window).resize(function () {
        chart.resize();
    });
}

function initChina(){
	var chart = echarts.init(document.getElementById("china"));
    $.getJSON('json/china.json', function(data) {
        echarts.registerMap('china', data);
        chart.setOption({
        	geo: {
        		type : 'map',
                map : 'china',
                zoom: 1.3,   //这里是关键，一定要放在 series中
                layoutCenter : [ '50%', '50%' ],
                layoutSize : '100%',
                label : {
                    normal : {
                        show : false,
                        textStyle : {
                            color : '#fff'
                        }
                    },
                    emphasis : {
                        show : false,
                        textStyle : {
                            color : '#fff'
                        }
                    }
                },
                itemStyle : {
                    normal : {
                        areaColor : 'rgba(24,65,91,0)',
                        borderColor : '#408087',
                        borderWidth : 1,
                    },
                    emphasis : {
                        areaColor : 'rgba(24,65,91,0)'
                    },
                }
        	},
          	series: [
			{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					brushType: 'stroke'
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						formatter: '{b}'
					}
				},
				symbolSize: function(val) {
		            var symbolSize;
		            if (val[2] / 12 >= 6) {
		                symbolSize = 6;
		            } else if (val[2] / 12 <= 3) {
		                symbolSize = 3;
		            } else {
		                symbolSize = val[2] / 12;
		            }
		            return symbolSize;
		        },
				itemStyle: {
					normal: {
						color: '#a6c84c',
					}
				},
				data: [{
				    name: '',
					value: [118.4100, 39.6410],
				}]
			}]
        })
    });
    $(window).resize(function () {
        chart.resize();
    });
}
乐夫天命兮
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
echarts地图两点连线_宗地图的自适应制图与度量方法研究
weixin_36312301的博客
12-22 1001
作 者 信 息张玲玉1,2，梁　明1,2，罗　燕1,2，李文波3(1. 安徽大学　资源与环境工程学院，安徽　合肥　230601；2. 安徽大学　安徽省矿山生态修复工程实验室，安徽　合肥　230601；3. 华夏寰宇(湖北)规划勘测有限公司，湖北　武汉　430070)“【摘要】传统的宗地图制图软件在遵循基本的制图规则条件下，在权属特征信息取舍上具有较大的主观性，在权属制图效果上缺乏量化评价...
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
html5 echarts地图分布动画特效特效代码
03-20
html5 echarts地图分布动画特效是一款带有炫光效果的html5 echarts图表插件。
Echarts图表的动画是如何实现的？一文为你解密，有图有代码
最新发布
贝格前端工场的博客
06-28 1322
Echarts图表是可视化大屏中最常用组件，我们经常看到各种炫酷的图表动画效果，但是你知道这些动画效果叫什么，是如何实现的吗？今天贝格前端工场为大家分享一下。
echarts折线图流动特效的实现（非平滑曲线）
苏苏就是小苏苏的博客
08-08 9621
echarts折线图流动特效的实现（非平滑曲线）
echarts制作中国地图飞行线
u011233151的博客
04-08 1848
echarts制作中国地图飞行线
echarts 实现散点图连成线
to_prototy的博客
08-21 965
echarts实现散点图连成线
Echarts Map 连接线
sinat_37138973的博客
09-06 2547
效果图： 实现代码： var geoCoordMap = { 上海: [121.4648, 31.2891], 东莞: [113.8953, 22.901], 东营: [118.7073, 37.5513], 中山: [113.4229, 22.478], 临汾: [111.4783, 36.1615], 临沂: [118.3118, 35.2936], 丹东: [124.541, 40.4242], 丽水: [119.5642, 28.1854], 乌鲁木齐: [87.9.
Echarts地图动效制作
memory_zzz的博客
09-13 7450
Echarts地图动效制作
echarts 关系图动线
qq_42396791的博客
04-02 2205
不罗嗦上代码 js var x = -20; var y = 5; var jsonData = { data: [ //1列 { name: '节点1节点1节点1节点1', value: [0,0], itemStyle: { normal: {...
Echarts动画效果：实现数据左右移动
weixin_34409703的博客
05-29 6569
1、业务背景 　　图形实时从后台获取数据，让图形从最右边出现，每隔一秒向左移一位，当最左边的数据移到Y轴时，最左边的数据移出屏幕，最右边增加一个数。实现一个从右往左动画的效果 2、先看下项目中的demo解决实例 　　让数据从最右边出，不重复说了，利用数组的length特性 mounted(){ this.series.length = 50 this.fetchData(); }...
echarts-map:echarts 绘制地图 连线 时间轴 热力图等
05-12
echarts-map echarts 绘制地图 连线 时间轴 热力图等 使用echarts绘制了地图、连线、散点图、热力图、时间轴等 使用方法：在文件目录下打开控制台，开启一个python开启一个http服务，命令：python -m http.server 在浏览器中输入 即可看到效果 heatmap2里写了一个异步加载，感觉写得不太好，如果有更好的写法的话可以给我提交issue或者pr
echarts汽车仪表盘动画效果
04-25
echarts汽车仪表盘动画效果是一款基于canvas制作电动汽车仪表盘跳动，仪表盘数据显示，仪表盘车辆信息动效。
echarts 地图上如何打点
05-13
除了 scatter (散点图) 在地图上标记的方式之外,我们也可以使用 markPoint 图表标注的方式在地图上标记.
Echarts地图添加引导线效果(labelLine)
12-13
今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例： 如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：...
echarts地图JS
04-02
在ECharts中，地图图表是一种非常重要的类型，它能够将地理数据以地图的形式展示出来，使得数据分析更加直观易懂。在你提到的“echarts地图JS”中，主要是关于ECharts使用的地图JavaScript文件，这些文件通常包含了...
echarts中国地图开发第二章 打点与连线
add_ysd的博客
01-22 1414
第四步连线，连线需要连线数据格式为[[开始经纬度],[结束经纬度]] 与 series 中添加。series中添加 lines，status为1时连线为蓝色 0为红色。上期回顾：上期渲染出了中国地图，并且为地图增加了贴图与双层效果。文件中的 cp 字段获取，正常的开发中经纬度会由后端接口返回。本章讲描述如何打点与连线，最底下有完整的代码。第二步在 series 数组中添加。别忘了在mounted 中调用函数。第一步在 data 中声明。代码中的经纬度将会通过。获取，结束位置为北京。
echarts绘制地图及连线
热门推荐
bolanlaike的博客
01-10 2万+
最近用echarts画了很多图，写出来或许能帮助到大家 下图是最基本的一个地图加连线 本篇文章只写这个简单的，后续还有热力图，时间轴等   这里我只解析部分关键代码，完整代码见https://github.com/bolanlaike/echarts-map 这段代码主要是获取数据以及数据的组装 require([ 'echarts', ...
echarts地图绘制连线
09-06
要在 echarts 中绘制地图连线，你可以使用 echarts 的 geo 组件和 lines 这个系列类型。下面是一个简单的示例代码，展示了如何绘制两个城市之间的连线： ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 地图数据 var geoData = [ { name: '城市A', coord: [lon1, lat1] }, { name: '城市B', coord: [lon2, lat2] } ]; // 连线数据 var lineData = [ { from: '城市A', to: '城市B' } ]; // 绘制地图 myChart.setOption({ geo: { map: 'china', roam: true, label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series: [{ type: 'lines', zlevel: 2, symbolSize: 10, effect: { show: true, period: 4, trailLength: 0.5, symbolSize: 5 }, lineStyle: { color: '#fff', width: 1, opacity: 0.6, curveness: 0.2 }, data: lineData.map(function (dataItem) { var fromCoord = geoData.find(function (geoItem) { return geoItem.name === dataItem.from; }).coord; var toCoord = geoData.find(function (geoItem) { return geoItem.name === dataItem.to; }).coord; return { fromCoord, toCoord }; }) }, { type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { emphasis: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: 10, itemStyle: { normal: { color: '#fff' } }, data: geoData.map(function (geoItem) { return { name: geoItem.name, value: geoItem.coord.concat(10) }; }) }] }); ``` 你需要将 `chart` 替换为你的 HTML 元素 ID，`lon1`、`lat1`、`lon2`、`lat2` 替换为城市 A 和城市 B 的经纬度。这样就可以在地图上绘制出两个城市之间的连线了。你可以根据自己的需求修改样式和数据。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值