echarts中国地图,设置地图外边框,内各省界线不同样式

您所在的位置:网站首页 中国省地图轮廓 echarts中国地图,设置地图外边框,内各省界线不同样式

echarts中国地图,设置地图外边框,内各省界线不同样式

2023-08-15 07:18| 来源: 网络整理| 查看: 265

最近,我在网上查到一种设置内外边界的方案,首先来说,确实有效,代码如下: 在这里插入图片描述

option = { backgroundColor: '#000',//画布背景颜色 geo: { show: true, map: 'china', label: { show: false }, roam: false, itemStyle: { normal: { areaColor: '#000', borderWidth: 4, //设置外层边框 borderColor:'#f8911b', }, emphasis: { show: false, // areaColor: '#01215c' } } }, series: [ { type: 'map', map: 'china', label: { show: false }, roam: false, itemStyle: { normal: { areaColor: '#000', borderColor: '#a18a3a', borderWidth: 1 }, emphasis: { show: false, areaColor: null } }, } ] }

实现原理: 两个地图的叠加, 其一,底层地图设置边框,即geo中itemStyle.normal属性(这里显示的是中国边界线的边框,较宽) 其二,上层地图再设置边框,即series中itemStyle.normal属性(这里显示是的各省边界的边框,较窄) 首先,上层地图覆盖了下层地图,故各省边界边框显示的是series中设置的边界样式, 但又由于下层地图边框较宽,上层地图无法全部覆盖,所以只剩下中国边界显示出来,这样就实现了中国边界和各省边界不同样式的效果

实现的注意事项: 1,geo中设置map:"china"显示底图,series中也设置map:"china"显示上层地图。

series中的map:“china” 必不可少,否则无法实现

2,由于放大或移动时,只能操作一个地图,所以统一禁止地图缩放,移动。 在geo和series中都设置roam: false即可

参考链接 https://blog.csdn.net/qq_36437172/article/details/106099547



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3