echarts无法加载Map地图的问题

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量167 收藏
点赞数 2
分类专栏： 前端 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31937799/article/details/140320532
版权

项目场景：

echarts无法加载Map地图的问题

详情

查阅相关资料讲，echarts4.9以上版本已经移除了map，那么我们就得重新打包echarts文件了。打包echarts.min.js的链接：https://echarts.apache.org/zh/builder.html

在这个链接页面可以选择自己想使用的图表、坐标、组件等。记得修改版本至4.9以下。
在这里插入图片描述
目前我搜了echarts官网已经没有地图加载的json下载了。用阿里云下载自己需要的数据。
https://datav.aliyun.com/portal/school/atlas/area_selector

吉水于人
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts-map地图省、市、区县JSON
12-11
"echarts-map地图省、市、区县JSON" 指的是 ECharts 为了绘制中国各省份、城市及区县地图而准备的一系列 JSON 数据文件。 这些 JSON 文件包含了中国所有省、市、区县的地理坐标信息，包括行政区域的边界、中心点...
echarts-amap.min.js echarts针对高德地图的amap方法
05-06
2. **集成高德地图**：通过引入 `echarts-amap.min.js` 文件，ECharts 可以调用高德地图 API，实现地图的加载和操作。这包括地图的缩放、平移、标注等功能，同时可以利用高德地图的高精度地理信息和实时交通数据。 ...
Echarts中地图不显示问题总结
weixin_61933613的博客
01-21 1968
摘要：近期项目中需要使用一些图表，使用Echarts过程中遇到一些问题，记录下避免反复踩坑。
echarts地图使用问题，下钻
haoyuexihuai的专栏
07-20 3259
echarts地图使用问题，下钻 1.如果加载json格式的地图数据，需要服务器的支持，我是用的是tomcat2.版本不同，加载地图方式不一样，并且显示不同 版本3.x 版本2.x 但是我没有跳出区县的地图，最后放弃了，使用3.x版本 要加载地图，map值应该与js或者json中一致：一般为中文，（在官网下载的地图包：http://ecomfe.github.i
echarts 地图区域无法显示
ffiing 的博客
07-28 1万+
原作者文章传送门 http://blog.csdn.net/xuelang532777032/article/details/52586628 项目需要画一个全国项目实施状况的统计散点图 , 经推荐使用echarts 于是找了个比较符合要求的官网示例http://echarts.baidu.com/demo.html#scatter-map-brush 然后将官网代码拷到本地测试
vue使用echarts不显示地图【已解决】
ercircle的博客
05-15 5244
console.log(echarts.version); echarts版本号：4.7.0 main.js里添加 import “echarts/map/js/world.js”; import “echarts/map/js/china.js”; import “echarts/extension-src/bmap/bmap.js”;
echarts
u010004858的专栏
09-21 370
var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山', value: 12}, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {name: '青岛', value: 18}, {na...
echarts首次加载中国地图空白
m0_64689789的博客
04-17 748
这几天做了一个js+echarts的可视化图表，其中中国地图出现了首次加载不出现，只有改变浏览器的大小才出图，后来经过多方搜查终于给我弄出来了。其中最主要的原因是因为我的图表在第二个tab里面， 所以页面第一次加载的时候没来得及渲染上。所以我们在用setTimeout延迟执行，从而让他可以渲染上，这样就可以出图了。加上这段代码，我的图就可以出来了。
Echarts3实例 map地图加载点数据
热门推荐
idomyway的博客
12-18 2万+
前言     Echarts map地图展示坐标点，并能更具不同的属性值进行区分，展示点数据依赖于Echarts的散点图scatter、effectScatter，底图依赖于geo。     geo：地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。    ...
echarts中使用天地图的插件示例
01-01
echarts中使用天地图的插件示例，使用echarts中百度地图的插件改写，让其支持天地图的展示展示及使用。，使用echarts中高端地图的插件改写，让其支持天地图的展示及使用。 1.echarts-extension-tmap.js 在高度地图...
echarts世界地图资源map.zip
10-13
在给定的压缩包"echarts世界地图资源map.zip"中，主要包含的是ECharts用于绘制世界地图的资源文件。这些资源使得开发者能够利用ECharts在网页上展示全球范围内的数据分布和地理信息。 在ECharts中，地图图表是一种...
echarts map，echarts地图数据
08-20
描述中的“echarts map地图数据下载”意味着你需要获取对应的地图数据文件。ECharts官方提供了丰富的地图数据，包括中国各省份、城市，甚至世界地图。你可以通过ECharts官网的资源下载部分获取这些数据，也可以找到...
echarts使用中过程中的常用配置属性常见问题及绘制地图
法海你不懂爱
03-21 1万+
echarts使用中的常见的问题 1.给折线图画一条水准线 2.图表自适应容器 3.x轴文字过长显示不全的问题 4.echarts的点击事件 5.数据中如果有空值时 如何实现连接空值或者显示断开 6.关于echarts地图js文件制作问题 7.echarts引入地图文件 绘制地图 8.使用echarts绘制x轴可以自由伸缩的图表 1.给折线图画一条水准线 通常用echarts 我们会绘制...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 283
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1047
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 518
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1509
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
echarts 地图amap
07-28
echarts 地图amap是指在echarts中使用amap地图作为底图的功能。可以通过引入AMap插件来实现。具体的代码可以参考以下示例： ``` AMap.plugin("AMap.ToolBar", function () { // 异步加载插件 var toolbar = new AMap.ToolBar(); amap.addControl(toolbar); }); ``` 这段代码使用AMap插件来加载amap地图的工具栏，并将其添加到amap实例中。这样就可以在echarts地图中使用amap地图作为底图了。\[1\] 另外，如果你想在echarts地图中实现选中后的富文本效果，可以使用emphasis.label.formatter属性。这个属性支持富文本的书写，可以定义背景图片等效果。具体的代码可以参考以下示例： ``` emphasis: { label: { formatter: function (params) { // 在这里定义富文本的样式，可以使用背景图片等效果 return params.name + '选中后的效果'; } } } ``` 这段代码中，通过设置emphasis.label.formatter属性来定义选中后的富文本效果。你可以在这个函数中自定义富文本的样式，包括背景图片等效果。\[2\] #### 引用[.reference_title] - *1* [echarts结合amap (echarts-extension-amap)](https://blog.csdn.net/u011200562/article/details/116057362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts map （echarts地图）使用总结](https://blog.csdn.net/HurryUpp/article/details/128276321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值