echarts 區域地圖 新增標註
阿新 • • 發佈:2018-12-15
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> html,body{ background:#060d14; background-color:transparent; } </style> </head> <body> <script src="js/jquery.min.js"></script> <script src="js/echarts.js"></script> <div id="main" style="width: 100%;height:840px;"></div> <script type="text/javascript"> // 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 地圖資料 var uploadedDataURL = "js/廣西壯族自治區.json"; // 標註資料 var mapData = [ {'latitude':24.5080777697, 'longitude':109.4743093819 , 'name':'1', 'value':32358260, 'color':'#0394d9'}, {'latitude':24.4683698180, 'longitude':109.3094042452 , 'name':'2', 'value':32358260, 'color':'#d94d02'}, {'latitude':25.3051048188, 'longitude':109.3974095441 , 'name':'3', 'value':32358260, 'color':'#b42fd5'}, {'latitude':22.9996102015, 'longitude':108.4031798089 , 'name':'4', 'value':32358260, 'color':'#0394d9'}, ] $.get(uploadedDataURL, function(geoJson) { echarts.registerMap(name, geoJson); myChart.setOption(option = { //地圖配置 geo: { type: 'map', roam: true, label: { normal: { show: true, color:'#fff' }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: '#0394d9', areaColor: '#161331', }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', // animation: true, rippleEffect: { brushType: 'stroke' }, symbolSize: function (val,params) { return 20; }, 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.on('click',function(e){ console.log(e) if(e.name == 4){ parent.markClick() } }) </script> </body> </html>