Echarts官方实例地图不显示

解决Echarts初始化问题：代码优化与百度地图API应用

原创已于 2022-05-09 18:37:10 修改 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

于 2022-05-09 18:27:29 首次发布

其他专栏收录该内容

2 篇文章

订阅专栏

本文指导新手如何修改Echarts文件，添加必要的库并注释原有资源，解决图表加载问题。重点讲解了如何加入ECharts-gl、ecStat、dataTool等扩展，以及如何申请并使用百度地图API，确保地图功能正常。

官方显示是这个样子

下载后打开是这个样子

就一个标题，啥都没有

查了好多说的都很复杂，而且作为新手也看不懂

可以这么改

找到这个文件代码中的这一行

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js">

给注释掉，把下面这些代码加上

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
         <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=0YcYchrztiOxuU3IGBu3Nvq0N106Whkn&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

这样就可以了

注意：运行后会提示没有百度地图的API，需要去申请并获得ak码（申请其实就是注册一下填一下信息）后从我让你们新加的代码里的倒数第二行的这个位置替换掉

申请ak码可以看这篇

百度地图申请API