echarts map地图设置外边框或者阴影

最新推荐文章于 2024-08-08 16:01:08 发布

weixin_33813128

最新推荐文章于 2024-08-08 16:01:08 发布

阅读量6.8k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cbbe61ef265da037c7ce256

版权

本文介绍了一种通过重叠地图实现边框和阴影效果的方法，通过调整center、aspectScale和zoom保持一致，可以轻松创建出设计图中的细边框或阴影效果。关键代码已给出，适合对echarts地图样式有需求的开发者。

摘要由CSDN通过智能技术生成

换个思路实现起来也很简单，比如设计图是这个样子：

你觉得边框不好实现，但是你会不会实现下面两种样子

细边框:

粗边框:

如果你说你都会，那么问题就解决了，如果想实现阴影就把底层map的边框改成阴影,两个重叠一下就是你想要的效果(center，aspectScale和zoom需要一样)，附上关键代码：

geo: {
              map: 'china',
              center: [112.194115019531, 23.582111640625],
              zoom: 12,
              aspectScale: 1, //长宽比
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    color: '#ccc'
                    }
                  },