一、初始准备

1. 新建html

首先，新建项目目录 echartsMapDemo，在其中新建一个 html 文件 index.html。
echartsMapDemo/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>ECharts map Demo</title>
</head>
<body>
</body>
</html>复制代码

2.引入echarts文件

从 echarts官网下载最新完整开发包。

将下载好的包放置在 echartsMapDemo/dep 目录下并在 html 中以 script 标签引入：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
</body>

<script src="/dep/echarts.min.js"></script>

</html>

3.创建图标容器

在 html 中定义一个 div 作为地图的容器，高度设为 500px 。别忘了，一定要保证容器高度不为 0：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
    <div id="map-wrap" style="height: 500px;">
        <!-- 这里以后是地图 -->
    </div>
</body>
<script src="/dep/echarts.min.js"></script>
</html>

然后，我们还需要一个地图文件，echart 提供两种格式的地图数据，一种是 js 格式，一种是 JSON 格式。下文中我们会分别使用这两种方式实现。

同样去官网上下载，这里选择下载中国地图 china.js 或 china.json 。你也可以根据需要选择其他省份地图或世界地图

好了，准备工作完成，现在就开始绘制地图了~

二、绘制地图

echart 提供两种格式的地图数据，一种是 js 格式，一种是 JSON 格式。下面分别介绍两种格式的用法：

引用js格式地图数据：

1.在官网上下载 js 格式中国地图 china.js，将下载好的 china.js 放在 echartsMapDemo/map/js 目录下，以 script 标签引入到 html 中:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
    <div id="map-wrap" style="height: 500px;">
        <!-- 这里以后是地图 -->
    </div>
</body>
<script src="/dep/echarts.min.js"></script>

<script src="/map/js/china.js"></script>

</html>

2.在js中用 echarts.init() 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象。

同时定义一个变量 option，作为图表的配置项：

// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));

// mapChart的配置
var option = {

};

3.通过配置 option，新建一个地理坐标系 geo ，地图类型为中国地图。

var option = {
    geo: {
          map: 'china'
      }
}

geo.map 属性定义该地理坐标系中的地图数据，这里我们要用 china.js ，设置map值为 ‘china’。

这里需要注意，中国地图的map值为 ‘china’ ，世界地图的map值为 ‘world’ ，但如果要引用省市自治区地图 map 值为简体中文，例如 beijing.js，map 值为’北京’。

4.调用 setOption(option) 为图表设置配置项。

mapChart.setOption(option);

引用JSON格式地图数据：

1.同样在官网下载JSON格式的地图数据，放在echartsMapDemo/map/json目录下

2.json数据通过异步方式加载，加载完成后需要手动注册地图

这里我们使用 jQuery 的 $.get() 方法异步加载 china.json （首先要在html中引用 jquery ，这里省略操作说明），在回调函数中，以上述同样的方法初始化一个 mapCharts 、注册地图并设置 option：

$.get('map/json/china.json', function (chinaJson) {

        echarts.registerMap('china', chinaJson); // 注册地图

        var mapChart = echarts.init(document.getElementById('map-wrap'));

          var option = {
              geo: {
                  map: 'china'
              }
          }

              mapChart.setOption(option);

      });
});

现在就可以在页面中看到中国地图了：

为了突出散点效果，先为地图改个颜色

var option = {
    geo: {
        map: 'china',

        itemStyle: {                    // 定义样式
            normal: {                    // 普通状态下的样式
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {                    // 高亮状态下的样式
                areaColor: '#2a333d'
            }
        }
    },
    backgroundColor: '#404a59',          // 图表背景色
}

换装后的地图：

Eharts绘制地图