最近要实现一个地图的效果,地图外有个外边框,配置项无此配置,在网上看到的效果,还需要积分下载,顿时感觉很不好,互联网之所以发展到如此,个人感觉是因为 "分享" 。找不到就自己实现咯。
换个思路实现起来也很简单，比如设计图是这个样子：
你觉得边框不好实现，但是你会不会实现下面两种样子
如果你说你都会，那么问题就解决了，两个重叠一下就是你想要的效果(center，aspectScale和zoom需要一样)，附上关键代码：
geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 label: { normal: { show: true, textStyle: { fontSize: 16, color: '#ccc' } }, emphasis: { show: false, textStyle: { color: '#ccc' } } }, roam: false, itemStyle: { normal: { borderColor: "#fff", borderWidth: 5, areaColor: '#272235', fontWeightL: 700, /* shadowBlur:20, shadowColor: '#fff',*/ }, emphasis: { areaColor: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#3f15d6' // 0% 处的颜色 }, { offset: 1, color: '#d243cd' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } } } }, series: [ { type: 'map', map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, geoIndex: 1, aspectScale: 1, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: true, textStyle: { fontSize: 16, color: '#ccc' } }, emphasis: { show: false, textStyle: { color: '#ccc' } } }, roam: false, itemStyle: { normal: { areaColor: '#272235', borderColor: '#fff', fontWeightL: 700, borderWidth: 1 }, emphasis: { areaColor: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#3f15d6' // 0% 处的颜色 }, { offset: 1, color: '#d243cd' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } } }, data: [] } ] 如果想实现阴影就把底层map的边框改成阴影
本篇如能对您有所帮助，实在是感到荣幸。如有不合理之处也请大家多多指点