vue3+echarts：地图不显示，echarts地图空白

原创

已于 2022-09-28 18:02:54 修改 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端 #elementui #javascript

于 2022-09-27 17:32:43 首次发布

本文介绍了解决ECharts地图加载不显示的问题，包括给div元素设置高度和配置百度地图API密钥的方法，并提供了详细的步骤指导。

有两个原因

①没有给div定高度

②使用的echarts地图demo里面含有百度地图，所以要去申请百度地图key和引入百度地图

第一个：没有给div定高度

<div id="echartsMap"></div>
.....
//css
#echartsMap{
height:600px;//定个高度即可
}

第二个：使用的echarts地图demo里面含有百度地图

//先npm百度地图
npm i vue-baidu-map -S

①申请百度地图key

百度地图开放平台 | 百度地图API SDK | 地图开发

点击提交！

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

意初

关注关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

echart地图不显示问题

weixin_55966654的博客

06-20

7360

解决echarts不显示地图问题，echarts5.0以上的版本不支持地图功能，所以需要装5.0以下的版本

vue2+echarts5:2D地图打点、下钻

cwjxyp的博客

07-12

1174

要实现地图可点击、下钻，为了使地图有3D效果，原本用需要下载依赖,由于存在地图下钻后在区域内无法展示完整地图，改用2D地图效果展示结尾附上源码地图需要有才能挂载，需要将挂载方法写在中挂载完成后，传入配置项渲染地图、如果有事件也在此时配置其中和的区别为，前者是内容区的点击事件，即地图区域，后者为整个区域，包含地图和区域的空白部分区域。下钻在中不再内置地图数据，在项目中使用的是阿里云的数据。注意，在本地获取数据没有问题，但当发布到测试环境或者生产环境可能会返回数据403，需要在中添加一行代码配置

2 条评论您还未登录，请先登录后发表或查看评论

Echarts中地图不显示问题总结

weixin_61933613的博客

01-21

4476

摘要：近期项目中需要使用一些图表，使用Echarts过程中遇到一些问题，记录下避免反复踩坑。

vue3 实现echarts 3D 地图

热门推荐

程序猿小白的博客

06-08

1万+

1、项目中引入echarts，发现地图显示不出来，一直以为是安装出了问题，重新下了好几遍。 2、解决方法： // 在main.js中 import echarts from 'echarts' //下边这两行尤为重要，数据才能正常渲染 import china from 'echarts/map/json/china.json' echarts.registerMap('china', china) 3、地图成功显示 ...

vue3中使用echarts地图

m0_57442975的博客

12-26

6366

左侧是地图，右侧是JSON数据路径，点击可以获取对应省市数据，这里我获取的是整个中国地图数据，点击右侧链接地址复制到浏览器打开，浏览器打开后全选复制放入自己项目的json文件中，并在地图文件中引用。首先需要创建好项目结构，这里map文件夹下新建一个vue和json文件（后面会用到，用来存放地图JSON数据）红色框中均是地图的配置项，可根据项目需求使用，通过查阅配置项手册完善地图信息，在setOption中配置即可。pnpm install echarts --save //安装。

echarts地图：全球+全国+省级，可下钻层级

07-21

在这个主题中，我们将探讨如何使用 ECharts 显示全球地图、全国地图，并实现下钻至省级的层级功能，尤其关注在 Vue 3.0、Vite 和 TypeScript 框架中的应用。 1. **ECharts 地图组件** ECharts 提供了丰富的地图...

vue+vuex+axios+echarts画一个动态更新的中国地图的方法

08-28

Vue+Vuex+Axios+ECharts实现动态更新中国地图的方法本文主要介绍了使用Vue、Vuex、Axios和ECharts来实现动态更新中国地图的方法。下面是该方法的详细说明：一、生成项目及安装插件首先，需要使用Vue CLI生成一...

vue3 + ts + svg + ECharts 实现双十一数据大屏

djemx2025的博客

05-30

1264

💡 欢迎加入「」，一起学习交流前端和Node端技术。

vue3中使用echarts展示地图

weixin_43816986的博客

04-12

2824

echarts地图显示问题

weixin_40089156的博客

09-30

1108

【代码】echarts地图显示问题。

在vue3中用echarts画地图

weixin_40945354的博客

04-03

1688

<template> <div ref="chart" style="width: 2500px;height:860px;"></div> </template> <script setup> import { ref, onMounted } from 'vue'; import * as echarts from 'echarts'; import chinaMap from '@/assets/json/china.json'

vue3使用echarts中国地图

qq_44552416的博客

11-28

1859

需求：Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图。鼠标悬浮省份上面显示指定的数据，地图支持缩放和拖拽的功能，页面放大缩小支持自适应，window.addEventListener(‘resize’, resize);添加防抖动函数debounce。

vue3使用echarts绘制地图

Liuyiaixuexi的博客

11-29

2128

地图echarts数据可视化

Echarts官方实例地图不显示

ThePythonFucker的博客

05-09

1920

官方显示是这个样子下载后打开是这个样子就一个标题，啥都没有查了好多说的都很复杂，而且作为新手也看不懂可以这么改找到这个文件代码中的这一行 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"> 给注释掉，把下面这些代码加上 <script type="text/javascript" src="https

vue3中echarts不显示，居然是在这么简单的地方出错

AZ092的博客

03-24

717

完全没有报错，想破脑袋也没想到居然是在这么简单的地方出了问题，没设置宽高。还以为它会有默认高度，结果没设置宽高就不会显示。

ECharts visualMap显示不出地图的问题

嘤嘤怪赚钱养妈妈

02-13

5176

就算是之前安装ECharts官网上的文档来用visualMap后面发现地图就是显示不出来后面找到了问题是因为没有对应的js，如果是中国地图就需要china.js，如果是全球地图就是需要word.js。ECharts官网上现在暂时不能下载。我分享出来。链接：https://pan.baidu.com/s/1jceOa-uJsqiSsb5Py5epoQ 提取码：94dz ...

echarts 地图不显示地图的解决办法！

weixin_30588675的博客

09-04

5494

1首先需要下载echarts 2 在main 中需要引入 import echarts from 'echarts/dist/echarts.min.js' import china from 'echarts/map/json/china.json' echarts.registerMap('china', china) Vue.prototype.$echa...

Vue3结合ECharts实现地图下钻功能详解

通过引入 `echarts` 和 `vue-echarts`（官方推荐的 Vue 封装组件），开发者可以在 Vue3 项目中无缝集成 ECharts 图表，并利用其丰富的配置项实现高度定制化的地图展示效果。实现地图下钻功能的关键在于地理数据的...