Echarts 地图隐藏右下角 “南海诸岛” 的方法

1、需求： Echarts 地图右下角 "南海诸岛" 在项目中有点多余，需要隐藏

2、查询 Echarts 官网配置项，发现修改属性 "geo.regions" 即可

3、没设置属性 "geo.regions" 之前，如下图

4、设置属性 "geo.regions" 之后，如下图

5、"geo.regions" 属性可以对特定的区域配置样式，此项目中，是将该地区透明度设置为 0 ，隐藏文字标签，主要内容如下

geo: [{// 地理坐标系组件map: "china",roam: false, // 可以缩放和平移aspectScale: 0.8, // 比例layoutCenter: ["50%", "38%"], // position位置layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域label: {// 图形上的文本标签normal: {show: true,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}},emphasis: { // 高亮时样式color: "#333"}},// 这里是重点！！！regions: [{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形}},label: {show: false // 隐藏文字}}],itemStyle: {// 图形上的地图区域normal: {borderColor: "rgba(0,0,0,0.2)",areaColor: "#005dff"},emphasis: {// 高亮时areaColor: "#99CC33",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 10,borderWidth: 0,shadowColor: "rgba(0, 93, 255, 0.2)"}}}]

6、【注意】使用 "geo" 属性后，需要给属性 "series.geoIndex" 赋值，代码如下，可参考官网

写给自己的随笔，有问题欢迎指出(*^▽^*)

Echarts 地图隐藏右下角 “南海诸岛” 的方法相关推荐

Echarts中国地图不能显示南海诸岛的问题
注册中国地图的时候,必须是china,则echarts.registerMap('china', geoJson),不能China或是'中国',否则无法显示南海诸岛
echarts全国地图只显示南海诸岛问题
在使用百度开源的可视化工具echarts时,用到中国地图,参照官方文档用此段代码 value = [155, 10, 66, 78, 33, 80, 190, 53, 49.6]attr = [&qu ...
echart绘制海南地图时增加南海诸岛显示（现成geojson数据）
使用场景:产品经理要求展示海南地图时,需要显示南海诸岛: 问题:南海诸岛在中国地图上的显示,是echart在mapName='china'时,默认fix进去.但是海南省不会默认fix进去解决方案:将 ...
echarts全国地图只显示南海诸岛问题解决
经排查发现是因为eharts3 不再内置地图文件,因此需要我们手动引入官网的js或者json文件. 显示中国地图需要china.js文件. echarts官网 http://echarts.baidu ...
关于echarts中，南海诸岛不显示的问题
最近vue项目需求,需要制作一个大区的中国地图,在使用 node_modules\echarts\lib\coord\geo\fix\nanhai.js 在判断中加入自己地图的名字就行. if (ma ...
ECharts实现带钓鱼岛和南海诸岛的中国(China)地图
转载 [问题探讨]ECharts实现带钓鱼岛和南海诸岛的中国(China)地图环境:VUE+ ECharts 重点阐述: 1,在VUE安装ECharts后,在如下目录就有地图js/json可以使用 ...
echarts 中国地图(带南海诸岛) 及各省份地图json文件
各省份.区域的地图json文件可以去 http://datav.aliyun.com/tools/atlas 找,能下载. 中国地图(带南海诸岛) 上代码 <template><di ...
echart map地图隐藏南海诸岛
中国地图隐藏南海诸岛功能在geo选项中添加regions属性,代码如下 const option = {.......geo: {map: 'china',show: true,roam: true ...
Echarts地图不展示南海九段线/南海诸岛问题解决
改之前: 改之后:(因为没有数据颜色较浅,将就看吧) 1.第一种情况:如果map类型为中文'中国'/地图名称,而不是china 进入这个路径文件:\node_modules\echarts\lib\c ...

Echarts 地图隐藏右下角 “南海诸岛” 的方法

Echarts 地图隐藏右下角 “南海诸岛” 的方法相关推荐

最新文章

热门文章