有两个原因

①没有给div定高度

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

第一个：没有给div定高度

 ..... //css #echartsMap{ height:600px;//定个高度即可 }

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

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

①申请百度地图key

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

点击提交！ 

百度地图密钥key自己复制即可！ 

②引入百度地图

1.在index.html 页面， head中引入

案例：                 
         

2.在main.js

//main.js import 'echarts/extension/bmap/bmap';

3.注意！！作者是按需引入echarts，想要全局引入的直接在main.js里面

全局引入方法：

// echarts5.0以前的版本 import echarts from 'echarts'   // echarts5.0 import * as echarts from 'echarts'  // vue2 Vue.prototype.$echarts = echarts   // vue3 app.config.globalProperties.$echarts = echarts

按需引入方法：（作者是按需引入）

创建一个echarts.js文件（直接复制粘贴即可）

//echarts.js //按需引入echarts，在echarts.js里 import * as echarts from 'echarts' // 引入echarts 核心代码 // import { init, use, registerMap } from "echarts/core"; // 引入柱状图图表和折线图表、饼图表、散点图、地图,图表后缀都为 Chart import { BarChart, LineChart, PieChart, ScatterChart, MapChart } from 'echarts/charts'; // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component import {   TitleComponent,   TooltipComponent,   GridComponent,   DatasetComponent,   TransformComponent,   ToolboxComponent,   GeoComponent } from 'echarts/components'; // 标签自动布局，全局过渡动画等特性 import { LabelLayout, UniversalTransition } from 'echarts/features'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from 'echarts/renderers';  // 注册必须的组件 echarts.use([   TitleComponent,   TooltipComponent,   GridComponent,   DatasetComponent,   TransformComponent,   BarChart,   LineChart,   PieChart,   ScatterChart,   LabelLayout,   UniversalTransition,   CanvasRenderer,   ToolboxComponent,   GeoComponent,   MapChart, ]);   // 导出 export default echarts

4.在vue单文件里面引入百度地图和echarts的路径，最后按照Echarts的地图案例复制过来就可以了

import 'echarts/extension/bmap/bmap';//echarts内置的百度地图 import echarts from "/src/common/js/echarts";//echarts ...  onMounted(() => {       const getMapt = echarts.init(document.getElementById("map"));          getbarChart.setOption({               ............         })     }) 

作者上一篇文章，

vue3+elementPlus：前端自定义el-tree图标icon_意初的博客-CSDN博客重点：template蒙版下svg和use，然后前端遍历添加key和value，取判断放图标for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加直接map遍历前端自定义tree图标。https://blog.csdn.net/weixin_43928112/article/details/127015894?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127015894%22%2C%22source%22%3A%22weixin_43928112%22%7D