Echarts使用一：在地图上将特定城市显示高亮

最新推荐文章于 2025-04-10 19:41:20 发布

liuchongee

最新推荐文章于 2025-04-10 19:41:20 发布

阅读量6w

点赞数 10

分类专栏： echarts 数据可视化文章标签：地图数据可视化 echarts

本文链接：https://blog.csdn.net/liuchonge/article/details/52198431

版权

最近项目要使用echarts进行数据可视化。主要用到中国和各省市地图，第一次用也是遇到了很多问题，在这里记录一下，方便以后回顾。
首先将第一个需求说一下，就是根据传入的一条数据在地图上将两个城市连线并显示高亮。在介绍代码之前先说一下echarts的一个大致流程。以地图为例：
1，标签里面一般会将要使用到的js文件引入进来，这里的js文件可以是在线的，比如说下面例子中所使用的链接；也可以是本地的，也就是把echarts官网提供的文件下载下来，把本机文件存储路径写上也是可以的，目的就是把地图要使用到的数据导入进来。
2，进入body之后会为地图生成一个div，用于放置所生成的地图。就是下面这句话：

var myChart = echarts.init(document.getElementById('main'));

3，为要生成的地图配置参数，这里也是最重要的部分，要按照自己的需求生成想要的地图就要定制自己的option，这部分就要自己去深入了解了。
4，把参数传入之前定义的myChart变量，把地图显示出来。
myChart.setOption(option);
恩，一个最简的流程就是这样，我这个demo本来是要连接数据库查询数据的，但是这里为了简单就定义一个数据然后循环读取。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts使用一</title>
<link rel="stylesheet" href="../css/main.css" type="text/css"/>
    <!-- 引入 echarts.js -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data = [
         {name: '广州', value: '北京'}
    ];
    //这里记录每个城市的坐标信息（不全）
var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
    '金昌':[102.188043,38.520089],
    '泉州':[118.58,24.93],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],

最低0.47元/天解锁文章