echarts省市地圖顯示
阿新 • • 發佈：2020-09-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <div id="mainMap" style="width: 600px;height:400px;"></div> <script type="text/javascript"> let dataParam = [{name:'泉州市',value:'100萬'},{name:'廈門市',value:'100萬'}]; //用福建地圖展示各個地市的人口數量 $.get('https://geo.datav.aliyun.com/areas_v2/bound/350000_full.json', function(mapJson) { echarts.registerMap('福建省', mapJson); var chart = echarts.init(document.getElementById('mainMap'));//在id為mainMap的dom元素中顯示地圖 chart.setOption({ tooltip: { trigger: 'item', formatter: function (params) {//回撥函式，引數params具體格式參加官方API//滑鼠放到某個地市上，顯示這個地市的名稱加人口數 //例如 params.name：當前地市名稱。params.value：你傳入的json資料與當前地市匹配的一項。 //params.data.value:你傳入的json資料與當前地市匹配的一項中'value'對應的資料 if(params.data !== undefined){ return params.name + ":" + params.data.value; } } }, series: [{ type: 'map', map: '福建省',//要和echarts.registerMap（）中第一個引數一致 label: { show: true }, data: dataParam//人口資料：例如[{name:'泉州市',value:'100萬'},{name:'廈門市'，value:'100萬'}......] }] }), chart.on('click', function (params) {//回撥函式，點選時觸發，引數params格式參加官方API alert(params.name);//彈出當前點選城市的名稱 }); }); </script> </body> </html>