Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Echarts中地图引用问题

Echarts中地图引用问题

作者头像
码客说
发布于 2023-10-19 06:38:37
发布于 2023-10-19 06:38:37
1.7K00
代码可运行
举报
文章被收录于专栏:码客码客
运行总次数:0
代码可运行

前言

引用地图的时候报错:

Map china not exists. The GeoJSON of the map must be provided.

原因是新版本的Echarts已经移除了地图的JSON

解决方法

  • 使用旧版本(不推荐)
  • 引入注册地图的JSON

使用旧版本

下载低版本的echarts@4.1

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm ls echarts  // 查看自己的echarts版本
npm install echarts@4.1.0 --save  //下载低版本echats包含china.js

然后在组件内直接引入china.js即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import "echarts/map/js/china.js";

新版本引用并注册Map

方式1(推荐)

1、下载china.json文件 存放于自己的文件夹下

2、引用并使用 在初始化echarts实例前,调用echarts.registerMap方法, 在option的geo属性设置对应值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import chinaMap from "@/assets/echarts/china.json";
mounted() {
  echarts.registerMap("china", { geoJSON: chinaMap });
  if (!this.chart) {
    this.chart = echarts.init(this.$el)
  }

  let option = {
        geo:{
            map:'china',
        }
  }
  this.chart.setOption(option);
},

china.json

https://www.psvmc.cn/zjtools/z/echarts_common/china.json

方式2

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import "@/assets/echarts/china.js";

china.js

https://www.psvmc.cn/zjtools/z/echarts_common/china.js

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
图表5 地图
百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
Qwe7
2022/06/16
5000
echarts的学习(四)饼图,地图相关的学习
图形 饼图的基本实现 地图 饼图的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src
一写代码就开心
2021/01/05
5320
echarts的学习(四)饼图,地图相关的学习
echarts3 地图只显示南沙群岛
产生上述现象后,刷新一下页面看看地图是否显示正常,如果正常请参考我的另一篇文章:http://blog.csdn.net/john1337/article/details/54947787
johnhuster的分享
2022/03/28
8110
腾讯云AI代码助手编程挑战赛-可视化飞线图
本项目是借助腾讯云AI代码助手编写的基于ECharts库开发的交互式数据可视化工具。项目通过飞线图的形式,直观展示中国地图上各个城市之间的连接关系,适用于物流路径、交通网络、迁徙路线等多种场景的展示。
全栈若城
2025/01/10
870
腾讯云AI代码助手编程挑战赛-可视化飞线图
echarts3 地图只显示南沙群岛,刷新页面显示正常
最近在使用echarts3 地图时遇到一个奇怪的问题,进入页面只显示南沙群岛部分,再次刷新页面显示正常,搜索无果后进行了摸索式探索,最终找到了问题的解决方案,现记录于此希望帮到遇到同样问题的朋友。
johnhuster的分享
2022/03/29
1.5K0
echarts3 地图只显示南沙群岛,刷新页面显示正常
地图的常见配置
$.get('json/map/anhui.json', function (anhuiJson) { })
Qwe7
2022/06/16
4580
傻瓜式自制「GeoJSON」
当我们做地理坐标系的图表时,怎么找不到合适的底图怎么办?比如天津的底图,往往还是按照以前的行政区划,没有滨海新区;又或者我想把某个产业园区圈出来怎么办?
ZXand618
2022/04/10
1.6K0
傻瓜式自制「GeoJSON」
Vue 的打包优化之路Vue的打包优化之路
ECharts的JSON地图文件占了很大一部分,大概有1.96MB gzip以后900KB,这一部分是没有办法做处理的。然后ECharts也应该使用按需加载
MrTreasure
2018/12/24
2.4K0
echart实现地图的逐级钻取
本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现: 1、点击地图展示下一级地图; 2、通过区域导航可返回上一级地图;
牛老师讲GIS
2018/10/23
1.1K0
echart实现地图的逐级钻取
echarts中国地图散点实现自定义动画
前言:文章不知为何突然审核不通过,现在重新编辑再次分享给大伙,天下之大,能帮一点是一点
全栈程序员站长
2022/11/03
1.9K0
Vue实现echarts地图与table表格数据联动
今天后端突然告诉我说,需要我实现一下通过点击地图,获取地图的地址,然后通过地址名称来拿取table表格的数据,从而实现表格和数据的联动,我一想,不就添加一个点击事件嘛,简单,结果。。。。
玖柒的小窝
2021/10/19
2.4K0
Vue实现echarts地图与table表格数据联动
制作乡镇地图数据
最近在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。
逍遥子大表哥
2022/12/21
1.9K0
制作乡镇地图数据
ECharts中Map(地图)样式配置、渐变色生成
ECharts是我们常用的图表控件,功能特别强大,每次使用都要查API比较繁琐,这里就记录开发中常用的配置。
码客说
2024/03/29
10.4K0
ECharts中Map(地图)样式配置、渐变色生成
echarts中地图和统计图的简单使用
各个省份地图json下载地址: https://github.com/apache/incubator-echarts/tree/master/map 或者点击这里 链接:https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA 提取码:b397
不愿意做鱼的小鲸鱼
2022/09/26
1.2K0
echarts中地图和统计图的简单使用
ECharts的简单使用
下载页:http://echarts.baidu.com/download.html
易墨
2018/09/14
1.6K0
ECharts的简单使用
echarts画中国地图及省份切换
最近用 ehcarts 写了一个有关中国地图的需求,这篇文章来总结下基本的原理和用法。
windliang
2022/09/23
4.7K0
echarts画中国地图及省份切换
vue实现世界疫情地图(点击进入子地图)
用axios请求这些数据如果出现跨域问题,就设置本地代理,在根目录下创建vue.config.js文件
代码哈士奇
2021/01/26
1.1K0
vue实现世界疫情地图(点击进入子地图)
echarts实现航班选座案例分析
最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位。于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码。首先让我们来看下示例的效果图。
拿我格子衫来
2022/01/24
2.3K0
echarts实现航班选座案例分析
疫情大屏优化-ECharts 地图下钻功能实现
最近在网络上看到了很多地图下钻的文章,感觉都很不错,正好自己也在研究这部分知识,就想着把下钻这个功能结合到疫情大屏中来,这样就能够更好的展示不同省份的疫情信息了。废话不多说,直接来干货!
周萝卜
2020/05/22
1.7K0
开发一个地图图表,摸鱼三小时编码十分钟,还被夸效率太高了
早年是百度开发的,后期捐赠给Apache了(就是Tomcat、Maven、Kafka那个Apache)。
大风写全栈
2025/01/07
880
开发一个地图图表,摸鱼三小时编码十分钟,还被夸效率太高了
相关推荐
图表5 地图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验