echarts（一）之地图连线动效

最新推荐文章于 2025-07-15 19:30:46 发布

乐夫天命兮

最新推荐文章于 2025-07-15 19:30:46 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签：地图 echarts 北京

本文链接：https://blog.youkuaiyun.com/wangxinxin1992816/article/details/89874029

Echarts 专栏收录该内容

6 篇文章

订阅专栏

博客展示了地图效果，给出了实现该效果的HTML代码以及map.js代码，涉及地图相关信息技术内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：
在这里插入图片描述
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();
    });
}