echarts地图部分仅含中国地图与少量省市地图，现以陕西省为例，基于JSON方式给出基础的省份地图生成方法。
aa25c996a8526e24b98519e608bab1e.png
各省市经纬度JSON文件获取地址：#&lat=44.402391829093915&lng=169.189453125&zoom=3
796eaa5324d58c2ccc8d4d75fe711b1.png
示例文件： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陕西西安市地图</title> <style type="text/css"> body, html { width: 100vw; height: 100vh; overflow: hidden; } .map-box { margin: 30px auto; width: 1200px; height: 500px; } </style> </head> <body> <div></div> <script ></script> <script type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { //散点相关信息 var mapData = [{ 'latitude': 34.263161, 'longitude': 108.948024, 'name': '西安市', 'value': 15, 'color': '#ff6521' }, //西安市 ] var dom = document.getElementById("map"); var myChart = echarts.init(dom); var option1 = null; myChart.showLoading(); //加载动画 $.get('./json/610000.json', function(result) { myChart.hideLoading(); //关闭加载动画 echarts.registerMap(name, result); //加载地图数据 option1 = { tooltip: { trigger: 'item', formatter: function(params) { return params.name; } }, toolbox: { show: false, //此字段表示是否显示或启用 //orient: 'vertical', //工具栏 left: 'left', top: 'top', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, geo: { type: 'map', zoom: 1.2, //地图初始大小，这里是关键，一定要放在 series中 因为geo在series中会加载，所以zoom放在此处 roam: true, label: { normal: { show: true, color: '#333' }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: '#4a86fd', //区域边框颜色 areaColor: '#bfdfe0', //区域填充颜色 }, emphasis: { areaColor: '#4380fd', borderWidth: 0 } }, }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', // animation: true, rippleEffect: { brushType: 'stroke' }, symbolSize: function(val, params) { //散点大小 return val[2]; }, data: mapData.map(function(itemOpt) { //散点生成 return { name: itemOpt.name, value: [ itemOpt.longitude, itemOpt.latitude, itemOpt.value ], label: { emphasis: { position: 'right', show: false } }, itemStyle: { normal: { color: itemOpt.color } } }; }) }] }; myChart.setOption(option1, true); window.addEventListener("resize", function() { //浏览器大小调整echarts随之改变 myChart.resize(); }); myChart.on('click', function(params) { //地图区域点击时的联动 根据params的值来联动对应数据 console.log(params); //此处写点击事件内容 alert(params.name) }); }); }) </script> </body> </html>
