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

最新推荐文章于 2024-07-01 17:32:29 发布
最新推荐文章于 2024-07-01 17:32:29 发布
阅读量3.5k 收藏 3
点赞数 5
分类专栏： 小技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingdinghuoshan/article/details/96102401
版权

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

echarts.registerMap(regionName, geoJson);

1. 问题解决：

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

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

 

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

将注册名不写成china即可

pm-丁火火
关注
专栏目录
记一次优化echarts中的海南诸岛显示
weixin_43144016的博客
01-09 744
然而我们看到官方只提供了eps和png版本，和我们需要的json和geoJson格式相差很大，eps是ai软件输出的文件格式，至少是矢量的，png格式是有损图片，非矢量，所以我们把eps试图转化成json成为了当下的任务，我们召集了公司的python大神帮忙转成json，发现转出来的文件非常大无法使用，这个方案废弃了；通过这样的一番操作后，我们就可以得到geoJson文件，当然这只是南海诸岛符合wgs48的一系列经纬度地址，接下来我们还需要将它整合进我们的主文件中，主文件在。arcgis绘制的子图。
[问题探讨]ECharts实现带钓鱼岛和南海诸岛的中国(China)地图
tom_wong666
10-15 5300
主要介绍 json方式获取 json的要看下为什么南海诸岛显示不出来–china.js 钓鱼岛的主要说一下—增加
Echarts 地图隐藏右下角 “南海诸岛” 的方法
01-20
1、需求： Echarts 地图右下角 “南海诸岛” 在项目中有点多余，需要隐藏 2、查询 Echarts 官网配置项，发现修改属性 “geo.regions” 即可 3、没设置属性 “geo.regions” 之前，如下图 4、设置属性 “geo.regions” 之后，如下图 5、”geo.regions” 属性可以对特定的区域配置样式，此项目中，是将该地区透明度设置为 0 ，隐藏文字标签，主要内容如下 geo: [ { // 地理坐标系组件 map: china, roam: false, // 可以缩放和平移
echarts的中国地图去掉南海诸岛
热门推荐
Zxiuping的博客
04-04 1万+
geo: { map: "china", roam: true, zoom:1, //默认显示级别 scaleLimit:{min:0,max:3}, // 缩放级别 regions: [ { name: "南海诸岛", ...
Echarts 世界地图GEOJSON（包含南极，九段线）
u011028557的博客
07-01 276
Echarts 世界地图GEOJSON（包含南极，九段线）。
关于echarts中南海诸岛的显示问题
ddyy2695734664的博客
02-19 2365
关于echarts中南海诸岛的显示问题 1.china.js 文件中 echarts.registerMap(‘china’, //名字要是’china’，不能写成’中国’ 2.echarts 配置中地图名称 mapName: ‘china’, var myChart = echarts.chinaMap(‘firstchart’, { bgColor: ‘#154e90’, mapName: ‘china’,//1.此处也需是’china’不能写成’中国’ }); 效果图： ...
Echarts中国地图不能显示南海诸岛的问题
HDdgut的博客
03-12 3664
注册中国地图的时候，必须是china，则echarts.registerMap(‘china’, geoJson)，不能China或是‘中国’，否则无法显示南海诸岛
Echarts地图不展示南海九段线/南海诸岛问题解决
m0_68570277的博客
07-14 2877
修改判断 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 中国地图增加南海九段线】
weixin_44833875的博客
12-13 2283
这里面的地址随便打开一个，然后你会发现里面的json数据跟china.js里面刚才找到那个位置后面的数据格式是一样的，整体替换就出现九线段了，地图的其他属性这里就不说了，只说下九线段的问题。按照说明,将红框里面的地址在浏览器打开,和echarts里面的china.js进行对比,发现数据格式是一模一样的。我就把这个地址里面的json数据重新copy了一份替换,发现确实能够展示南海九段线 这个问题就解决了.这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置,于是在网上寻找。
前端 echarts 地图 南海诸岛不显示问题
qq_44325545的博客
04-13 1066
2、在判断中添加自己的地图名称。成功解决 南海诸岛不显示问题。1、进入下图所示文件。
最新世界地图（含南海九段线）
03-23
6. 渲染地图：调用ECharts实例的`setOption`方法，传入配置项，绘制地图。 在这个过程中，开发者可能还需要了解和运用的知识点包括： - JavaScript基础：理解变量、函数、对象等基本概念。 - HTML和CSS：构建页面...
echarts地图geojson
05-10
3. **解析并渲染地图**：ECharts会自动解析GeoJSON数据，并生成地图的轮廓。如果你需要在地图上添加额外的数据，如省份的GDP、人口等，可以在`data`属性中添加数据项，每个数据项包含`name`（区域名称）和`value`...
china+echarts.zip
04-17
这些坐标数据包括经纬度，使得ECharts能够渲染出准确的地图轮廓。 接下来，我们来探讨"echarts.js"。ECharts是一个基于JavaScript的开源可视化库，由百度公司开发，广泛应用于数据分析和信息展示。ECharts支持多种...
Echarts 中国地图各个省市自治区自定义颜色
dfho1719的博客
04-26 3211
前言 最近接了一个外包的项目，其中有个需求是这样的， 需要展示一个中国的统计地图，要求每个省市区都是不一样的颜色，必须特别区分开。以及隐藏南海部分。 看了Echats相关文档，发现有类似的demo，但不是特别符合要求。于是自己仔细读文档研究。找到解决问题于是分享一下。 正文 废话不多少，直接上代码 方法1 （在数据中直接添加样式） 需要后台配合的data数据结构如下: data...
Vue中使用echarts绘制地图，以及只显示南海问题
weixin_34121282的博客
03-28 1410
下载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 3171
echarts 如何在地图组件上加入南海 eharts 3中的geo组件和map series 中因为地图精度的提高，不再内置地图数据增大代码体积，我们需要自行下载geojson数据；而目前网上能找到的中国geojson数据基本不包含南海部分，自己制作一个实在太麻烦。 其实eacharts 内部有南海部分的svg 图形的就像你在eacharts demo页面上看到的一样，要把他显示出来 ...
Echarts中国地图json文件，去除诸岛
yangxx的博客
04-27 7790
Echarts中国地图json文件 我是用的json格式的文件axios调用的 首先创建一个js文件 import axios from 'axios' // 获取GeoJSON数据 export const getGeoJson = (type, name) => { if (type === 'country') return axios.get('/china.json') //写自己文件的相对路径 } 然后在页面中引用 import { getGeoJson} from '../js
echarts 中国地图(带南海诸岛) 及各省份地图json文件
RAGACM的博客
11-25 8937
各省份、区域的地图json文件可以去 http://datav.aliyun.com/tools/atlas 找，能下载。 中国地图(带南海诸岛) 上代码 <template> <div style="width: 950px;height:610px;"/>//画板大小 </template> <script lang="js"> import echarts from 'echarts' import 'echarts/theme/macarons
vue-seamless-scroll echarts不渲染
最新发布
07-10
Vue Seamless Scroll是一个用于Vue.js的插件，它提供了一个无缝滚动的解决方案，适用于列表视图的滚动性能优化。然而，当你遇到Echarts图表不渲染的问题，可能是由于以下几个原因： 1. 初始化问题：确保在`mounted`生命周期钩子里正确地初始化了Echarts实例，并传入正确的配置参数。 2. 动态数据更新：如果图表的数据依赖于外部API或其他动态数据源，需要确保在数据改变时，同步刷新图表(`chart.updateOption()`). 3. Seamless Scroll与Echarts兼容性：尽管大部分情况下两者可以协同工作，但如果插件与Echarts版本有冲突，可能会导致某些特性无法正常显示。尝试升级或降级相关库到兼容版本。 4. 冲突的CSS样式：Seamless Scroll可能导致元素的高度计算问题，检查是否有影响Echarts容器的CSS样式冲突。 5. 错误的DOM操作：确保你在绑定事件监听或图表生成时，操作的是正确的DOM节点。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值