给地图的外边框加阴影(给地图的外边框设置与内边框不同的颜色)

时间:2024-03-18 21:35:55

1.先看效果图

给地图的外边框加阴影(给地图的外边框设置与内边框不同的颜色)

2.说一下整体的思路

        因为地图暂无内外边框分开设置边框的属性,所以我们可以利用地理极坐标组件,采用--双层地图-覆盖--思想,底层的地图设置自己需要的边框颜色和加阴影与否,顶层的地图设置内边框的属性和加阴影与否,最后将顶层的覆盖到底层上。

      PS:需要注意的是两层地图都要设置禁止缩放和平移(roam:false【默认就是禁止的】),不然的话会导致地图的各种偏移(有兴趣的可以自己试试”不正常”的效果)

3.就说到这里,接下来看代码

①:第一步,先导入地图所需要的json或js文件(此处用的是beijing.js),紧接着导入绘制图表的echarts文件(此处用的是4.0.4版本的echarts.js)

PS:考虑到有些童鞋没有这两个文件,打算上传一下资源共享给大家,但是发现上传不了,初步了解的原因是别人上传过的资源,不能重复上传,所以大家在使用的时候只能自己想办法找资源喽

<script type="text/javascript"  src="echarts-4.0.4/echarts.js"></script>
<script type="text/javascript"  src="map/beijing.js"></script>

②:第二步,编写具体绘制图表的代码(代码有详细备注,方便理解;使用过程中可根据需要删除注释)

<script type="text/javascript">
 option = {
        geo:{
		map : '北京', //为保证图表的准确性,这里的一些属性需要和下面的一致
		aspectScale : 0.75, 
		zoom : 1.2,
		left : '8%',  
		itemStyle : {//外边框(底层地图)的一些属性
			borderColor : '#fff',
			borderWidth :6,
			shadowBlur:10,
			shadowColor: '#fff',
		 },
    	   },
	   series : [{
		name : '北京各区',
		type : 'map',//type必须声明为 map 说明该图标为echarts 中map类型
		map : '北京', //这里需要特别注意。如果是中国地图,map值为china,如果为各省市则为中文。这里用北京
		aspectScale : 0.75, //长宽比. default: 0.75
		zoom : 1.2,
		selectedMode :'single',//选中模式,表示是否支持多个选中,默认关闭,字符串取值可选'single'表示单选,或者'multiple'表示多选。
		left : '8%', //图表距离左边的位置
		label : {
			normal : {
				show : true,
			},
		},
		itemStyle : {
			normal : {//未选中的正常状态
				shadowBlur:1, //图形阴影的模糊大小
				shadowColor: 'rgba(0,0,0,1)',     //阴影颜色
				areaColor : 'rgba(23,161,250,1)', //区域颜色
				label : { //标签(丰台区、密云区....字体)的属性
					show : true,
					textStyle : {
						fontSize : 14,
					}
				},
			},
			emphasis : {// 也是选中样式
				shadowBlur:4,
				shadowColor: '#85E3FF',
				shadowOffsetX:5, //不同轴上的阴影
				shadowOffsetY:5, //体现凹凸效果
				borderWidth :2, //边框的宽度
				borderColor : '#85E3FF',//边框的颜色
				areaColor : 'rgba(23,161,250,1)',
				label : {
					show : true,
					textStyle : {
						color : '#fff'
					}
				}
			}
		},
		data : [
		    {
			name : '东城区',
			value : 1800,
		    }, {
		        name : '西城区',
		        value : 1700,
		    }, {
			name : '朝阳区',
			value : 1600,
		    }, {
			name : '丰台区',
			value : 1400,
		    }, {
			name : '石景山区',
			value : 1200,
		    }, {
			name : '海淀区',
		        value : 1000,
		    }, {
			name : '门头沟区',
			value : 800,
		    }, {
			name : '房山区',
			value : 600,
		    }, {
			name : '通州区',
			value : 400,
		    }, {
			name : '顺义区',
			value : 200,
		    }, {
			name : '昌平区',
			value : 100,
		    }, {
			name : '大兴区',
			value : 300,
		    }, {
			name : '怀柔区',
			value : 500,
		    }, {
		    	name : '平谷区',
			value : 700,
		    }, {
			name : '密云区',
			value : 900,
			selected:true,
		    }, {
			name : '延庆区',
			value : 1100,
		    } ]
	    }]
	};  

</script>

PS:标签位置的改变

    因为地图的位置和大小的不同可能会导致标签的位置不合理,此时可以去beijing.js文件中通过修改经(上下)纬(左右)度来改变标签的位置

给地图的外边框加阴影(给地图的外边框设置与内边框不同的颜色)