有两个原因

①没有给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 | 地图开发

点击提交! 

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

②引入百度地图

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

<script type="text/javascript" src="https://api.map.baidu.com/api?v=xxx&ak=yyy"></script>

案例:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
//index.html

<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title id="title"></title>
    //放在这里
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥"></script>
    
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

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

 

Logo

前往低代码交流专区

更多推荐