关于Echarts不渲染南海诸岛的问题

最新推荐文章于 2025-05-13 15:41:24 发布
最新推荐文章于 2025-05-13 15:41:24 发布
阅读量3.7k 收藏 3
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 小技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dingdinghuoshan/article/details/96102401
本文探讨了使用ECharts地图组件渲染地图时遇到的南海诸岛显示问题，并提供了具体的解决方案。通过调整注册名称，可以控制是否显示南海诸岛。

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

近期在做echarts的map地图，可是总是不能把南海诸岛渲染出来，这是为什么呢？

echarts.registerMap(regionName, geoJson);

1. 问题解决：

在echarts注册地图资源时，regionName被赋值为"china"，即会渲染南海诸岛；

即使你的geoJson是世界地图资源，省级地图资源，均会加上南海诸岛九段线；

 

2. 你不想要南海诸岛怎么办？

将注册名不写成china即可

Echarts 地图隐藏右下角 “南海诸岛” 的方法
窝窝头的博客
02-16 2万+
1、需求：Echarts 地图右下角的 "南海诸岛" 在项目中有点多余，需要隐藏 2、查询 Echarts 官网配置项，发现修改属性 "geo.regions" 即可 3、没设置属性 "geo.regions"之前，如下图 4、设置属性 "geo.regions" 之后 5、其中 "geo.regions" 属性可以对特定的区域配置样式，其实此项...
[问题探讨]ECharts实现带钓鱼岛和南海诸岛的中国(China)地图
tom_wong666
10-15 5564
主要介绍 json方式获取 json的要看下为什么南海诸岛显示不出来–china.js 钓鱼岛的主要说一下—增加
Echarts地图不展示南海九段线/南海诸岛问题解决
m0_68570277的博客
07-14 3992
修改判断 if (mapType === 'china'）为 if (mapType === 'china' || mapType==='中国'/地图名称）成功解决。可以去 http://datav.aliyun.com/tools/atlas 找，能下载各省份、区域的地图json文件。进入这个路径文件：\node_modules\echarts\lib\coord\geo\fix\nanhai.js。1、第一种情况：如果map类型为中文‘中国’/地图名称，而不是china。
echarts中国地图优化
最新发布
baixia1992612的博客
05-13 347
option = {geo: [regions: [}运行结果运行结果。
Echarts中国地图不能显示南海诸岛的问题
HDdgut的博客
03-12 3843
注册中国地图的时候，必须是china，则echarts.registerMap(‘china’, geoJson)，不能China或是‘中国’，否则无法显示南海诸岛
关于echarts中南海诸岛的显示问题
ddyy2695734664的博客
02-19 2513
关于echarts中南海诸岛的显示问题 1.china.js 文件中 echarts.registerMap(‘china’, //名字要是’china’，不能写成’中国’ 2.echarts 配置中地图名称 mapName: ‘china’, var myChart = echarts.chinaMap(‘firstchart’, { bgColor: ‘#154e90’, mapName: ‘china’,//1.此处也需是’china’不能写成’中国’ }); 效果图： ...
最新世界地图（含南海九段线）
03-23
6. 渲染地图：调用ECharts实例的`setOption`方法，传入配置项，绘制地图。 在这个过程中，开发者可能还需要了解和运用的知识点包括： - JavaScript基础：理解变量、函数、对象等基本概念。 - HTML和CSS：构建页面...
echarts3 实现地图全国各省市地图下钻 （已修改省份和部分市级名字不居中问题）
05-11
本文将深入探讨如何使用Echarts3框架实现全国各省市地图的下钻功能，并解决省份和部分市级名称不居中问题。Echarts是一个基于JavaScript的数据可视化库，广泛应用于网页图表的绘制，尤其在地理数据展示方面具有强大...
echarts地图geojson
05-10
3. **解析并渲染地图**：ECharts会自动解析GeoJSON数据，并生成地图的轮廓。如果你需要在地图上添加额外的数据，如省份的GDP、人口等，可以在`data`属性中添加数据项，每个数据项包含`name`（区域名称）和`value`...
echarts中国地图坐标2023版json文件
01-15
其中，“china.js”可能是精简版，可能去除了海南诸岛和海南边界的坐标数据，适用于一般应用场景；而“chinaFull.js”则包含了完整的地理坐标信息，包括海南的相关区域，适用于需要精确地图展示的情况。 使用...
echarts世界地图json补全10段线及南海诸岛
08-10
echarts世界地图json补全10段线及南海诸岛
【echarts 中国地图增加南海九段线】
weixin_44833875的博客
12-13 2815
这里面的地址随便打开一个，然后你会发现里面的json数据跟china.js里面刚才找到那个位置后面的数据格式是一样的，整体替换就出现九线段了，地图的其他属性这里就不说了，只说下九线段的问题。按照说明,将红框里面的地址在浏览器打开,和echarts里面的china.js进行对比,发现数据格式是一模一样的。我就把这个地址里面的json数据重新copy了一份替换,发现确实能够展示南海九段线 这个问题就解决了.这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置,于是在网上寻找。
记一次优化echarts中的海南诸岛显示
weixin_43144016的博客
01-09 1088
然而我们看到官方只提供了eps和png版本，和我们需要的json和geoJson格式相差很大，eps是ai软件输出的文件格式，至少是矢量的，png格式是有损图片，非矢量，所以我们把eps试图转化成json成为了当下的任务，我们召集了公司的python大神帮忙转成json，发现转出来的文件非常大无法使用，这个方案废弃了；通过这样的一番操作后，我们就可以得到geoJson文件，当然这只是南海诸岛符合wgs48的一系列经纬度地址，接下来我们还需要将它整合进我们的主文件中，主文件在。arcgis绘制的子图。
前端 echarts 地图 南海诸岛不显示问题
qq_44325545的博客
04-13 1445
2、在判断中添加自己的地图名称。成功解决 南海诸岛不显示问题。1、进入下图所示文件。
Vue中使用echarts绘制地图，以及只显示南海问题
weixin_34121282的博客
03-28 1512
下载echarts依赖 下载依赖我想大家都会： cnpm / npm install echarts yar add echarts typescript项目 npm install @types/echarts 复制代码引入 在main.js中引入 import Echarts form 'echarts' Vue.prototype.$echarts = Echarts 复制...
echarts 如何在地图组件上加入南海
肖恩的笔记
09-17 3259
echarts 如何在地图组件上加入南海 eharts 3中的geo组件和map series 中因为地图精度的提高，不再内置地图数据增大代码体积，我们需要自行下载geojson数据；而目前网上能找到的中国geojson数据基本不包含南海部分，自己制作一个实在太麻烦。 其实eacharts 内部有南海部分的svg 图形的就像你在eacharts demo页面上看到的一样，要把他显示出来 ...
echarts的中国地图去掉南海诸岛
热门推荐
Zxiuping的博客
04-04 1万+
geo: { map: "china", roam: true, zoom:1, //默认显示级别 scaleLimit:{min:0,max:3}, // 缩放级别 regions: [ { name: "南海诸岛", ...
怎么去除echarts地图九段线
01-11
### 如何在 ECharts 地图中移除九段线 为了实现这一目标，在配置项中的 `geo` 属性下可以通过设置 `silent` 或者调整边界绘制选项来间接影响显示效果，不过针对特定如中国南海九段线这种特殊情况，则更推荐直接修改地图 JSON 文件或利用官方提供的简化版地图文件[^1]。 如果希望快速解决此问题而不改动地图数据源本身的话，可以尝试加载不带九段线的地图版本。ECharts 官方提供了多种不同风格以及细节程度的地图资源可供选择。对于中国地图而言，默认可能带有较为详细的地理特征包括九段线；而某些精简后的版本则不会展示这些元素。 另外一种方式是在初始化 echarts 实例之前通过自定义 map 特性的方法去除不需要的部分： ```javascript // 假设已引入echarts和china.js(地图包) var myChart = echarts.init(document.getElementById('main')); option = { geo: { map: 'china', roam: true, zoom: 1.2, // 缩放比例 itemStyle:{ normal:{} }, silent : false, label: {show: true}, regions:[ { name:'南海诸岛',// 对应的是九段线内的岛屿名称， value:'', itemStyle:{opacity:0}// 设置透明度为0隐藏该部分 } ] } }; myChart.setOption(option); ``` 上述代码片段展示了如何通过调整 `regions` 来改变特定区域的样式，从而达到视觉上的“移除”。需要注意的是这里的 `name:'南海诸岛'` 需要匹配实际地图JSON里对应的名字字段才能生效[^3]。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值