echart怎么让南海诸岛不显示或隐藏部分省市名称

最新推荐文章于 2025-05-14 15:10:36 发布

原创最新推荐文章于 2025-05-14 15:10:36 发布 · 8.3k 阅读

4 ·

CC 4.0 BY-SA版权

前端技术-插件专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用ECharts进行地图可视化的配置方法，详细展示了如何通过设置不同的地图属性来实现特定区域的数据展示效果。包括了如何定义颜色范围、触发器、地图样式等关键配置项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    var option = {
                title: {
                },
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                dataRange: {
                    x: 'right',
                    y: 'bottom',
                    padding:[0,50,60,0],
                    textStyle: {
                        color: '#fff'
                    },
                    splitList: [
                        {start: 0, end: 0, label: jidi,color: '#7bc272'},
                        {start: 1, end: 1, label: injidi,color:'#3c5598'}
                    ]
                },
                series : [
                    {
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'single',
                        itemStyle:{
                            normal:{borderColor:"#355d80",borderWidth:"1",label:{show:true,textStyle:{color:"#888",fontSize:12}},areaStyle:{color:'#2c5068'}},
                            emphasis:{label:{show:true,color:'#fff',textStyle:{color:"#fff",fontSize:12}},areaStyle:{color:'transparent'}}
                        },
                        data:[
                            {name:"南海诸岛",
                                itemStyle:{
                                    normal:{opacity:0,label:{show:false},borderWidth:"0",borderColor:"#10242b",areaStyle:{color:'#10242b'}},
                                    emphasis:{opacity:0,label:{show:false}}
                                }
                            },
                            {name:"香港",
                                itemStyle:{
                                    normal:{opacity:0,label:{show:false}}
                                }
                            },
                            {name:"澳门",
                                itemStyle:{
                                    normal:{opacity:0,label:{show:false}}
                                }
                            },
                            {name:"台湾",
                                itemStyle:{
                                    normal:{opacity:0,label:{show:false}}
                                }
                            },
                            {name: '西藏',value:1},
                            {name: '山东',value:0},
                            {name: '青岛市',value:0},
                            {name: '聊城市',value:1}
                        ]
                    }
                ]
            };