Echarts实现区级地图

1.寻找需要的地图

获取geojson地图：
Echarts 官方Geojson 数据已被禁止, 补充geojson数据获取:
[http://datav.aliyun.com/tools/atlas/]
如果需要绘制自定义区域可以只用这个网站
http://geojson.io/#map=4/35.64/103.54
推荐先用 Open-> File 打开一个需要补充区域的json 然后用方形工具描绘需要的区域;
获取js地图：
Echarts官网已关闭下载，可以取github下载地图：
[https://github.com/apache/incubator-echarts]

2.Echarts导入地图

引入jquery.js和echarts.js文件到页面

<script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src = "/js/echarts.min.js"></script>

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用示例：
JavaScript 引入示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({series: [{type: 'map',map: 'china'}]
});
</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]});
});

本例是采用第二种方式

2.完整实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>扬州市产业地图</title>
<script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src = "/js/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 1200px;height:900px;"></div>
<script type="text/javascript">
//container 为div的id
var dom = document.getElementById("map");
//得到echarts的实例对象
var myChart = echarts.init(dom);var optionMap = {tooltip : {trigger : 'item',formatter : function(a) {return "";},show:true,alwaysShowContent: true,enterable: true,backgroundColor:'rgba(255,255,255,0.7)',borderColor: '#019ADD',borderWidth: 2,padding: [5,10],textStyle: {color: '#000',}},//地图坐标系必备的配置，具体的含义可以参考apigeo : {roam : false,//是否开启缩放和平移map : '360000',//地图名称zoom : 1.2,//当前视角缩放比例selectedMode : 'single',//选中模式label : {normal : {show : true,textStyle : {color : '#fff'}},emphasis : {show : true}},itemStyle : {//地图区域的多边形 图形样式hoverAnimation : false,normal : {color : '#0065CF',borderColor : '#FFF'},emphasis : {areaColor : '#A6C5BD',borderColor : '#FFF',opacity : 1}}},series : [ {type : 'effectScatter',//带有涟漪特效动画的散点（气泡）图coordinateSystem : 'geo',data : [{name:'1',value:[119.53,33.23,457]},{name:'2',value:[119.58,32.86,135]},{name:'3',value:[119.71,32.55,234]},{name:'4',value:[119.54,32.32,89]},{name:'5',value:[119.40,32.49,333]},{name:'6',value:[119.18,32.38,298]}],symbol:'circle',symbolSize : 5,showEffectOn : 'render',rippleEffect : {scale : 10,brushType : 'stroke'},hoverAnimation : true,label : {normal : {formatter : function(a){return "";},show : true,position:'inside',offset : [0 , 20],textStyle:{color:'#fff'}}},itemStyle : {normal : {color : '#f4e925',shadowBlur : 10,shadowColor : '#333'}},zlevel : 1},{type : 'scatter',coordinateSystem : 'geo',data : [{name:'1',value:[119.53,33.23,457]},{name:'2',value:[119.58,32.86,135]},{name:'3',value:[119.71,32.55,234]},{name:'4',value:[119.54,32.32,89]},{name:'5',value:[119.40,32.49,333]},{name:'6',value:[119.18,32.38,298]}],symbol:'pin',symbolSize : function(a){return a[2]==1?0:40;},rippleEffect : {scale : 10,brushType : 'stroke'},hoverAnimation : true,label : {normal : {formatter : function(a){return a.value[2];},show : true,position: 'inside',textStyle:{color:'#fff'}}},itemStyle : {normal : {color : '#00DEFF',shadowBlur : 10,shadowColor : '#333'}},zlevel : 2},]};$.get('/js/yangzhou.json', function (myJson){echarts.registerMap('yangzhou', myJson) //注册optionMap.geo.map = 'yangzhou';myChart.setOption(optionMap);});</script>
</body>
</html>

效果如下：
![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg