地圖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>