echarts地图的运用免费获取乡镇json数据

没有特别的幸运，那么就加倍的努力！！！

效果图
在这里插入图片描述

echarts地图需引入基本文件

echarts.js文件
中国地图js文件
全国json数据（可以按需引入，减少代码冗余），这一步进行了收集，特别是浙江这块数据比较齐全
下载路径：

https://github.com/15171222839/echartsMap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #main{
      width:500px;
      height:600px;
      border:1px solid grey;
      margin:100px auto;
    }
  </style>
</head>
<body>
  <div id="main"></div>



    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/china-main-city-map.js"></script>
    <script>
    var data1 = [{name:"杭州市",value:30,selected:true,itemStyle:{borderColor:"red"}},{name:"宁波市",value:70},{name:"台州市",value:40},{name:"舟山市", value:10},{name:"湖州市", value:100},{name:"嘉兴市", value:110},{name:"绍兴市", value:80},{name:"金华市", value:50},{name:"丽水市", value:80},{name:"温州市", value:66},{name:"衢州市", value:50}];

    function echartsMap(data1){
        $.get('json/china-main-city/330000.json', function (dataJson) {
          echarts.registerMap('mapName', dataJson);
          var chart = echarts.init(document.getElementById('main'));
          chart.setOption({
            tooltip: {
                show: true,
                formatter:function(e){
                  return e.data.name+"<br/>"+e.data.value+"万元";
                }
              },
              series: [{
                center: [120.257238, 29.165918],
                aspectScale:0.75,
                itemStyle:{//图形样式。
                  normal:{label:{show:true}},//显示地图地区名
                  areaColor: 'grey',
                    emphasis: {//选中状态下   高亮
                      areaColor: 'rgba(12,66,121,0.5)',
                      color:"green"
                  },
                  borderColor:"white",
                },
                data:data1,
                roam:true,
                  type: 'map',
                  map: 'mapName'
              }]
          });
      });
    }
    echartsMap(data1);   
    </script>
  
</body>
</html>