背景

公司需要使用百度地图在页面上展示设置的地理位置，同时，又有legend进行交互。因此，选择了echarts中使用百度地图的功能来实现。

该文章主要介绍通过申请注册key以及引入bmap.js，来实现Echarts中引入百度地图。同时，在生产过程中，出现无地图展示，如何处理解决。

过程

yarn add echarts echarts-for-react

配置可以参考官方示例

<ReactEcharts option={option} />

结果：引入成功，但是地图没有效果。

因此，我们需要获取百度地图的Key并引入，同时，找到并引入bmap.js。

打开百度地图开发者 -> 创建应用 -> 获取Key

umi一般是在配置文件进入引入（如：.umirc.ts）

headScripts: [
    `https://api.map.baidu.com/api?v=3.0&ak=你的Key`,
]

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

结果：

至此，我们会认为，已经成功引入，并且可以开发了（欢呼~）。然而，等到打包后，就有可能会在生产环境则无法正常显示的问题。

我的处理，是将bmap.js拷贝一份到目录，并引入。