echarts大屏数据可视化html代码合集完成中国省市区县镇地图展示

echarts完成中国省市区县镇地图展示

https://github.com/lijie-1024/echarts

https://github.com/lijie-1024/echarts

https://github.com/lijie-1024/echarts

https://gitee.com/jcat/ecahrts-map

https://gitee.com/jcat/ecahrts-map

http://www.zui99999999999999999999999999999999999daima.com/share/4037674720152576.htm
http://www.zui9999999999999999999999999999999999999999999999999999daima.com/share/5060112043002880.htm 全新数据驾驶舱完整网页模板，与众不同！
10套非常完美的大数据可视化模板

HTML5城市突发预警平台实时监控模板
10套非常完美的大数据可视化模板
jquery+bootstrap+echarts数据可视化大屏展示特效实例
大屏数据可视化html代码合集
大屏数据展示静态的HTML页面-主要是下载好后免费分享
python抓取数据并生成2020年新冠疫情省市数据可视化地图

目录

• 前言
• 一、中国地图
• • 1.1 地图数据-china.js
  • 1.2 代码应用
• 二、省份地图——以山东为例，其他省份同理
• • 2.1 地图数据-shandong.js
  • 2.2 代码应用
• 三、市级地图——以山东临沂市为例
• • 3.1 地图数据——linyi.json
  • 3.2 应用
• 四、县级地图——以山东临沂市沂南县为例，无镇级边框
• • 4.1 地图数据
  • 4.2 应用
• 五、镇级地图——以山东临沂市沂南县为例镇级地图
• • 5.1地图数据
  • 5.2 应用
• 六、案例全部代码
• 结语

前言

很长时间没有写博客了，最近在做一个大数据面板，记录一下如何使用echarts完成地图特效展示，此篇详细介绍书写过程；
首先说明：

• echarts提供了解析地图的方法，但是没有地图json数据，尤其是区县地图；
• 此篇主要解析如何获得地图数据及代码应用，样式并不在意；
• 如果对样式或功能有要求的可以参考案例： Echarts 实现可视化数据大屏展示页面
• 考虑到github关于数据国内下载缓慢，特附上码云上的中国各省份地图下载接口，git地址：https://gitee.com/jcat/ecahrts-map.git；
• 坐标拾取器：百度地图坐标拾取器
• 案例浏览：http://jcat.gitee.io/ecahrts-map/cityMap/index.html

一、中国地图

1.1 地图数据-china.js

获取全国数据，

• 可以在echatrs官方github下载china.js，
• 也可以直接下载我的文件中国各省份地图下载接口；
• 也可以使用命令行，npm install echarts -s 里面的node包中直接使用；

1.2 代码应用

html

    <div id="chinaMap"></div>
    <script src="js/china.js"></script>

• 1
• 2

js

 function chinaMap() {
    let myChart = echarts.init(document.getElementById('chinaMap'))
    option = {
      geo: {
        map: 'china',//这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致
        label: { show: true }, //显示省份
        roam: true, //缩放
      },
      series: [], //地图上二开点线特效数组，按需添加
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()//地图自适应
    })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

二、省份地图——以山东为例，其他省份同理

2.1 地图数据-shandong.js

获取省份数据

• 可以在echatrs官方github下载shandong.js，
• 也可以直接下载我的文件中国各省份地图下载接口；
• 也可以使用命令行，npm install echarts -s 里面的node包中直接使用shandong.js；

2.2 代码应用

html

    <div id="shandongMap"></div>
	<script src="js/shandong.js"></script>

• 1
• 2

js

  function shandongMap() {
    let myChart = echarts.init(document.getElementById('shandongMap'))
    option = {
      geo: {
        map: 'shandong', //这里的名称需要和shandong.js: echarts.registerMap('shandong',{})中的名称一致
        label: { show: true }, //显示地点
        roam: true, //缩放
      },
      series: [], 
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

三、市级地图——以山东临沂市为例

3.1 地图数据——linyi.json

获取市县级地图时和国省不同，没有官方的提供坐标，需要自行下载，这里推荐：

• datav地图选择器：http://datav.aliyun.com/tools/atlas
  
  拿到json数据后就可以使用

3.2 应用

html

<div id="linyiMap"></div>
<script src="js/city.js"></script>

• 1
• 2

city.js，将下载的json数据命名，方便js调用

tips：
这里下载下来的json文件也可以使用getJson()的方式请求本地json文件，但必须部署到服务端，才可以请求，不然谷歌浏览器就会报跨域。为了方便本地调用，使用的是命名成变量后调用。

var linyiMap = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        adcode: 371302,
        name: '兰山',
        center: [118.327667, 35.061631],
        centroid: [118.284576, 35.199955],
        childrenNum: 0,
        level: 'district',
        parent: { adcode: 371300 },
        subFeatureIndex: 0,
        acroutes: [100000, 370000, 371300],
      },
      ...]
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

js

  function linyiChart() {
    var linyiMapChart = echarts.init(document.getElementById('linyiMap'))
    echarts.registerMap('linyi', linyiMap, {})
   //echarts提供的方法echarts.registerMap(名称，地图数据，其他配置)
    option = {
      series: [
        {
          type: 'map',
          mapType: 'linyi',//名称需要echarts.registerMap('linyi',linyiMap,{})中的名称一致
          label: { show: true }, //显示文字
          roam: true,
          data: [],
        },
      ],
    }
    linyiMapChart.setOption(option)
    window.addEventListener('resize', function () {
      linyiMapChart.resize()
    })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

四、县级地图——以山东临沂市沂南县为例，无镇级边框

4.1 地图数据

• 县级地图一般是最低层级地图，使用datav地图选择器，可以下载没有镇级的县级地图；
• 如果还需要镇级地图，推荐：
  • echarts+百度地图适配 （下面会讲）
  • http://geojson.io/自行画框，然后导出json数据后使用；

4.2 应用

html

     <div id="yinanMap"></div>
    <script src="js/city.js"></script>

• 1
• 2

city.js 应用json数据

var yinanMap = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        adcode: 371321,
        name: '沂南县',
        center: [118.455395, 35.547002],
        centroid: [118.407078, 35.538035],
        childrenNum: 0,
        level: 'district',
        acroutes: [100000, 370000, 371300],
        parent: { adcode: 371300 },
      },...]
 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

js

 function yinanChart() {
    let yinanChart = echarts.init(document.getElementById('yinanMap'))
    echarts.registerMap('yinan', yinanMap, {})
    option = {
      series: [
        {
          type: 'map',
          mapType: 'yinan',
          label: { show: true }, //显示省份
          roam: true,
          data: [],
        },
      ],
    }
    yinanChart.setOption(option)
    window.addEventListener('resize', function () {
      yinanChart.resize()
    })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

五、镇级地图——以山东临沂市沂南县为例镇级地图

5.1地图数据

• 这里使用的是百度地图提供的API，附官网链接：百度地图api ；
• 没有百度ak也可以使用我的文件中的bmap文件夹下的css/js来书写；

5.2 应用

html

 <link rel="stylesheet" type="text/css" href="css/bmap.css" />
 <div class="box">
    <h1>山东省临沂市沂南县镇级地图</h1>
    <div id="yinanMapChart"></div>
  </div>
 <script src="js/bmap.js"></script>

• 1
• 2
• 3
• 4
• 5
• 6

js

  function zhenChart() {
    var map = new BMapGL.Map('yinanMapChart', {
      enableDblclickZoom: false,
      displayOptions: {
        building: false,
      },
    })
    map.centerAndZoom(new BMapGL.Point(118.455395, 35.547002), 14)//中心坐标，放大级别
    map.setMapStyleV2({
      styleId: '490ae0113912a55610bd2e63a719fb57',//地图风格
    })
    map.enableScrollWheelZoom(true)
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

六、案例全部代码

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>城市</title>
  <link rel="stylesheet" type="text/css" href="css/bmap.css" />
  <style>
    .box {
      display: inline-block;
      border: 1px solid #000;
      padding: 20px;
      margin: 10px;
      width: 48%;
      box-sizing: border-box;
    }

    .box>div {
      width: 100%;
      height: 300px;
    }
  </style>
</head>

<body>
  <div class="box">
    <h1>中国地图</h1>
    <div id="chinaMap"></div>
  </div>
  <div class="box">
    <h1>山东省地图</h1>
    <div id="shandongMap"></div>
  </div>
  <div class="box">
    <h1>山东省临沂市11</h1>
    <div id="linyiMap"></div>
  </div>
  <div class="box">
    <h1>山东省临沂市沂南县地图</h1>
    <div id="yinanMap"></div>
  </div>
  <div class="box">
    <h1>山东省临沂市沂南县镇级地图</h1>
    <div id="yinanMapChart"></div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script src="js/china.js"></script>
  <script src="js/shandong.js"></script>
  <script src="js/city.js"></script>
  <script src="js/bmap.js"></script>
  <script src="js/main.js"></script>
</body>

</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

js

$(function () {
  // 中国地图
  function chinaMap() {
    let myChart = echarts.init(document.getElementById('chinaMap'))
    option = {
      geo: {
        map: 'china',
        label: { show: true }, //显示省份
        roam: true, //缩放
      },
      series: [], //地图上二开点线特效数组
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  //   省级地图
  function shandongMap() {
    let myChart = echarts.init(document.getElementById('shandongMap'))
    option = {
      geo: {
        map: 'shandong',
        label: { show: true }, //显示省份
        roam: true, //缩放
      },
      series: [], //地图上二开点线特效数组
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  //   市级地图
  function linyiChart() {
    var linyiMapChart = echarts.init(document.getElementById('linyiMap'))
    echarts.registerMap('linyi', linyiMap, {})
    option = {
      series: [
        {
          type: 'map',
          mapType: 'linyi',
          label: { show: true }, //显示省份
          roam: true,
          data: [],
        },
      ],
    }
    linyiMapChart.setOption(option)
    window.addEventListener('resize', function () {
      linyiMapChart.resize()
    })
  }
  //   县级地图
  function yinanChart() {
    let yinanChart = echarts.init(document.getElementById('yinanMap'))
    echarts.registerMap('yinan', yinanMap, {})
    option = {
      series: [
        {
          type: 'map',
          mapType: 'yinan',
          label: { show: true }, //显示省份
          roam: true,
          data: [],
        },
      ],
    }
    yinanChart.setOption(option)
    window.addEventListener('resize', function () {
      yinanChart.resize()
    })
  }

  function zhenChart() {
    var map = new BMapGL.Map('yinanMapChart', {
      enableDblclickZoom: false,
      displayOptions: {
        building: false,
      },
    })
    map.centerAndZoom(new BMapGL.Point(118.455395, 35.547002), 14)//中心坐标，放大级别
    map.setMapStyleV2({
      styleId: '490ae0113912a55610bd2e63a719fb57',//地图风格
    })
    map.enableScrollWheelZoom(true)
  }
  chinaMap()
  shandongMap()
  linyiChart()
  yinanChart()
  zhenChart()
})

• 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

结语

以上就很清楚的书写了使用echarts完成中国省市区县镇地图展示的全过程，详细代码也可下载案例代码；