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文件中通过修改经(上下)纬(左右)度来改变标签的位置