|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>Echarts Map</title> <style> #app,#main1,#main2{ width: 1000px; height: 500px; } </style> </head> <body> <div id="app"></div> <div id="main1"></div> <div id="main2"></div> <a href="/">aaa</a> <script src="lib/jquery.min.js"></script> <script src="../dist/echarts.min.js"></script> <script src="map/js/china.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script> var chart = echarts.init(document.getElementById('app')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart1 = echarts.init(document.getElementById('main1')); chart1.setOption({ series: [{ type: 'map', map: 'china' }] }); }); axios.get('map/json/province/shanxi.json').then((data) => { echarts.registerMap('shanxi', data.data) let chart2 = echarts.init(document.getElementById('main2')) /* // 这种方式可以自定义地图样式 chart.setOption({ geo: { map: 'jiangsu', label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, }); */ // 这种方式可以显示城市名称 chart2.setOption({ series: [{ type: 'map', map: 'shanxi' }] }) }); </script> </body> </html> |
注意：首先需要将网站部署到iis或web服务器上运行，否则会出现错误，或显示数据不会，另外注意地图路径和变量名，最后需要注意地图显示设置大小css
不显示地图，首先需要引用map/js/province下对应省份的js，另外注意地图map:''名称，比如北京市地图为：map:'北京'而不是英文的beijing，
声明：本站内容来源于原创和互联网，尊重作者版权，转载请注明来源网址，欢迎收藏，谢谢！
2021-11-13 下午2:13