echarts省市地图显示
地图json获取地址：http://datav.aliyun.com/tools/atlas/#&lat=31.80289258670676&lng=104.32617187499999&zoom=4
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> 9 </head> 10 <body> 11 <div id="mainMap" style="width: 600px;height:400px;"></div> 12 <script type="text/javascript"> 13 let dataParam = [{name:'泉州市',value:'100万'},{name:'厦门市',value:'100万'}]; 14 //用福建地图展示各个地市的人口数量 15 $.get('https://geo.datav.aliyun.com/areas_v2/bound/350000_full.json', function (mapJson) { 16 echarts.registerMap('福建省', mapJson); 17 var chart = echarts.init(document.getElementById('mainMap'));//在id为mainMap的dom元素中显示地图 18 chart.setOption({ 19 tooltip: { 20 trigger: 'item', 21 formatter: function (params) {//回调函数，参数params具体格式参加官方API 22 //鼠标放到某个地市上，显示这个地市的名称加人口数 23 //例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。 24 //params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据 25 if(params.data !== undefined){ 26 return params.name + ":" + params.data.value; 27 } 28 } 29 }, 30 series: [{ 31 type: 'map', 32 map: '福建省',//要和echarts.registerMap（）中第一个参数一致 33 label: { 34 show: true 35 }, 36 data: dataParam//人口数据：例如[{name:'泉州市',value:'100万'},{name:'厦门市'，value:'100万'}......] 37 }] 38 }), 39 chart.on('click', function (params) {//回调函数，点击时触发，参数params格式参加官方API 40 alert(params.name);//弹出当前点击城市的名称 41 }); 42 }); 43 </script> 44 </body> 45 </html>
