echarts 绘制省份或城市地图

时间：

分类：

echarts

字数：

1.7k 字

时长：

大约需要 8 分钟

次数：

0 人阅读

方案一

第一步：下载 json 数据

去 http://datav.aliyun.com/tools/atlas/ 网站选择需要的省份，下载json数据即可。

注：由于echarts和高德地图处理数据方式不同，下载的 json 在渲染 legend(区域名称) 时，高德地图会使用properties.center作为显示点，而 echarts 则会使用properties.cp作为显示点，如果无此字段，则会自动计算一个中心点显示。由于区域地图的不规则，可能会导致两个区域名字重叠问题，这时候可以手动将 center 改为 cp 字段！！

第二步：使用方式

以北京市为例，使用方式如下：

示例：example1.html

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>北京地图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      width: 500px;
      height: 800px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById('container'));
    $.get('https://geo.datav.aliyun.com/areas_v2/bound/110000_full.json', result => {
      // 注册 echarts 地图
      echarts.registerMap('北京市', result);
      var option = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          text: '北京地图',
          x: "center",
        },
        geo: {
          map: '北京市',
          label: {},
          roam: true,
          itemStyle: {

          }
        },
        series: [{
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
            brushType: 'stroke'
          },
          symbolSize: function(val, params) {
            return 8;
          },
          data: [],
        }]
      };
      myChart.setOption(option);
    })
  </script>
</body>

</html>

方案二

第一步：下载 echarts 官方提供的省市数据

https://github.com/apache/echarts/tree/4.9.0/map/json

第二步：使用

示例：example2.html

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>北京地图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      width: 100%;
      height: 370px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script type="text/javascript" src="./example.sichuan.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById('container'));
    var option = {
      tooltip: {
        trigger: 'item',
      },
      title: {
        text: '四川地图',
        x: "center",
      },
      geo: {
        map: '四川',
        label: {},
        roam: true,
        label: {
          normal: {
            // show: true,
            textStyle: {
              position: 'center',
              color: '#fff'
            }
          },
          emphasis: {
            // show: false
          }
        },
        itemStyle: {
          normal: {
            areaColor: 'rgb(128,172,247)',
            borderColor: '#fcfcfc',
            borderWidth: 1
          },
          emphasis: {
            areaColor: 'rgb(247,63,63)'
          }
        },
      },
      series: [{
        name: 'point',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          brushType: 'stroke'
        },
        label: {
          normal: {
            show: false,
            position: 'right',
            formatter: '{b}'
          },
          emphasis: {
            // show: false
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(255,255,0)'
          }
        },
        //symbol: 'emptyCircle',
        symbolSize: 16,
        data: [
          // 百度地图坐标： http://api.map.baidu.com/lbsapi/getpoint/
          {
            name: '成都市',
            value: [104.076965,30.660315]
          },
          {
            name: '广元市',
            value: [105.827284,32.454727]
          }
        ]
      }]
    };
    myChart.setOption(option);
  </script>
</body>

</html>

方案三

如以上能找到的 geojson 都不能满足项目需求，那么可以考虑自绘 geojson，可在线绘制，参考网站：https://geojson.io

比如：深圳市和汕头市新增深汕特别合作区，但是能找到的地图数据中并不包含这部分数据，需要自行绘制。

示例：example3.html

如下：

以上示例使用到了好几个不太常用的API：

  1. 地图区域块使用图片图层渲染(series.itemStyle.areaColor.image)
  1. series label添加小图标(series.label.rich)
  1. 自定义 tooltip 样式(tooltip.formatter tooltip.extraCssText)
  1. 移动地图中某个模块位置，并修改该模块大小(registerMap)

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深圳市地图</title>
  <style>
    html,
    body {
      background-color: #001f55;
    }
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      width: 100%;
      height: 370px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYzZmMTI2My03ZTljLTQ3YjEtYTUzNC0wNGVlODcxMTVhMmQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkE4RjUwNkRGQ0Y4MTFFQkI1NDhGRTYxRkUzRDVDQTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkE4RjUwNkNGQ0Y4MTFFQkI1NDhGRTYxRkUzRDVDQTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0FCOTZGN0RGQ0Y4MTFFQjg0NkNFODhCOTg3QjkxMTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0FCOTZGN0VGQ0Y4MTFFQjg0NkNFODhCOTg3QjkxMTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7IEIp0AAAAJElEQVR42mKUcJ3JgAp0bLWAJBMDDsCCKXTl8DV8OughARBgAGjLBAhkln50AAAAAElFTkSuQmCC" alt="地图渲染" id="mapPattern" style="display: none;">

  <div id="container"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script src="./example.shenzhen.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById('container'));
    var mapPattern = document.getElementById('mapPattern')
    var icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAndJREFUSImdlk1rFEEQhp/qmdmFEIwieFQQRXJRBH+AFw/6c3PxEATxHlEwgkGIJ88BIWZ3Z7s87PRsTU3NZrGg6I/pqbffqu7qEi4zEyKu3VfUtQOpAxAPJO57aa1BCyLBXL/WAkqg0bwF9kY1mBtsqgBag2nHuPStEa/Z9a2oB0ymtSqubxkWw0WT6eNANXJpAioH6McWsBhfm74/aIU1NeMYWZDK9cvYAhag1PXX3o2WlGfoWRWt3bgA5m7cMnS1ZWbJaO0WepcWsK0qc9ZyB0FJeoWwckYtsxLPfn4qhmOwzCEreYnyaPufrEj8pNEvCAsDVGJbbPVMo2thWVY92FLeAEfGCEAic8xC7jPXD8gArHIuDRnG8VvJK+AI5YCWtyiPASFxTs0p8ICVPGemnxmeXHvAhGDC38WKzAHKQyDR8g7lGdB0zF/Q8rpj+gSlYXx9BgyTAbOyXZjlbrduhvIUL5njbu2cLIe7wCzgLgmz/v9KAfRGt7kx6RWby7xEuAgsnLOJ1w2V/mEbP5/Me0Cf3W1eXJP4i/ALyDS8R/jebWBF4oyaT5uNccEmAWSnk8/TGGyzoZaZnrGQewA0nOBzqfCbRr91gC3bdOefq4FLPcOSF1uEa+Z6ivADuDHfrkl8ZaYfEZYOLAJFuMz2GJfMMk5pZV5putNIF7OWIbM20LLBXAe0S3ZYO9cV92UqXXbzxRvWqGW5Vwzt/WkDd/uNWBd6HZUedTA5eKEDsH0eYH9Ke3ue4RSgzfy3lRh+PACtzY8Yw/ZHn6YiwKiAisYjwAJqjfq44gAj4Mny0bvU9qcK4EiiavvWQth/nKqyb5Odpf4/d3ZV6AC8bj8AAAAASUVORK5CYII='
    // 注册 echarts 地图
    echarts.registerMap('深圳市', shenzhen_geo_json, {
      '深汕区': { // 把深汕区到地图指定位置显示，同时修改显示宽度
        left: 114.525847,
        top: 22.667811,
        width: 0.16
      }
    })
    var option = {
      tooltip: {
        trigger: 'item',
        // formatter: '{b}<br/>{c}',
        formatter: function({ data = { value: [] }, name }, ticket, callback) {
          const value1 = typeof data.value[0] === 'undefined' ? '-' : data.value[0]
          const value2 = typeof data.value[1] === 'undefined' ? '-' : data.value[1]
          const value3 = typeof data.value[2] === 'undefined' ? '-' : data.value[2]
          let html = ''
          html += `<div class="index-map-tooltip-name">${name}</div>`
          html += `<div class="index-map-tooltip-online">数据1：<span class="index-map-tooltip-value">${value1}</span></div>`
          html += `<div class="index-map-tooltip-count">数据2：<span class="index-map-tooltip-value">${value2}</span></div>`
          html += `<div class="index-map-tooltip-user">数据3：<span class="index-map-tooltip-value">${value3}</span></div>`
          return html
        },
        extraCssText: `background: #174699; width: 257px; height: 139px;`
      },
      series: [
        {
          // geoIndex: 0, // 可以处理geo和type:'map'地图叠加缩放和移动不同步问题，但是有bug存在，偶尔还是会出现缩放不同步问题
          name: '',
          type: 'map',
          mapType: '深圳市', // 自定义扩展图表类型
          roam: true,
          label: {
            normal: {
              show: true,
              offset: [30, -40],
              color: '#fff',
              formatter: ({ name }) => {
                return `{a|${name}}\n{b|}`
              },
              rich: {
                a: {
                  fontSize: 12
                },
                b: {
                  width: 28,
                  height: 28,
                  lineHeight: 12,
                  backgroundColor: {
                    image: icon
                  }
                }
              }
            },
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              // areaColor: '#174699',
              areaColor: {
                image: mapPattern, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
              },
              borderColor: '#1ba0f8',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#1ba0f8'
            }
          },
          data: [
            { name: '罗湖区', value: [1234, 2903, 1908] },
            { name: '福田区', value: [1234, 2903, 1908] },
            { name: '南山区', value: [1234, 2903, 1908] },
            { name: '宝安区', value: [1234, 2903, 1908] },
            { name: '龙岗区', value: [1234, 2903, 1908] },
            { name: '大鹏区', value: [1234, 2903, 1908] },
            { name: '盐田区', value: [1234, 2903, 1908] },
            { name: '龙华区', value: [1234, 2903, 1908] },
            { name: '坪山区', value: [1234, 2903, 1908] },
            { name: '光明区', value: [1234, 2903, 1908] },
            { name: '深汕区', value: [1234, 2903, 1908] }
          ]
        }
      ]
    };
    myChart.setOption(option);
  </script>
</body>

</html>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-07-15/echarts-province-map/

如果您觉得文章不错，可以点击文章中的广告支持一下！