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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章