echarts文件下载及实现地图

最新推荐文章于 2024-08-20 09:36:59 发布

勉后之幸

最新推荐文章于 2024-08-20 09:36:59 发布

阅读量4.9k

点赞数 7

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/qq_41219388/article/details/107366815

版权

本文记录了使用Echarts实现交互式地图过程中遇到的问题及解决方案。通过下载合适的china.js和echarts.js文件，解决地图显示缝隙问题，并提供下载链接。在页面中引入文件并设置div容器，利用js代码完成地图展示及区域信息提示功能。

摘要由CSDN通过智能技术生成

因为项目中要用到地图，滑过区域要显示本区域的信息。用echarts做这个地图的时候踩了很多坑，也看了很多博主的文章，终于完成了自己想要的功能，所以在此记录下。

首先是下载的文件遇到的问题，前前后后下载了好多次，终于找到了完美的。其中china.js文件，之前下载的到地图出来后会有缝隙，然后看了一个博主的文章，TA的文件是好使的，在此放下链接 https://ask.csdn.net/questions/715546

echarts.js文件下载，链接 https://echarts.apache.org/zh/download.html

1.页面下拉，点击

2.这个页面的所有选项我都选了，也可根据自己的需要选择下载，因为我之前下载有漏掉的，导致有BUG，所以就全选了

3.当变成“OK”代表下载成功

接下来进入正题，实现地图

首先可以先看下最终效果，鼠标放在当前区域，就会展示当前区域信息。

页面首先引入下载好的文件

<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <link href="css/index_charts.css" rel="stylesheet" type="text/css"/>
</head>

页面上只要放个div就行

<style>
    *{margin:0;padding:0}
    html,body{
        width:100%;
        height:100%;
    }
    #map{
        width:588px;
        height:412px;
        margin: 150px auto;
        border:1px solid #ddd;
    }
</style>
    
    
<div id="map">
 
</div>

接下来就是主要的js代码了