以中国为中心Echart世界地图实例_世界地图资源-CSDN文库

共3个文件

html：2个

js：1个

echart世界地图

echart地图以中国为中心

echart地图

world.js

需积分: 45 123 浏览量 2020-08-17 13:39:04 上传评论 4 收藏 327KB ZIP 举报

ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，以及强大的地图功能。在这个“以中国为中心Echart世界地图实例”中，我们将探讨如何利用ECharts创建一个以中国为视觉中心的世界地图，并通过world.js文件来实现这一效果。 ECharts世界地图的实现主要依赖于`geo`组件。在ECharts中，`geo`组件用于绘制地理坐标系，它可以加载SVG或者TopoJSON格式的地图数据。在这个实例中，`world.js`很可能是包含世界地图数据的文件，可能是一个预处理过的GeoJSON数据，用于定义各个国家和地区的边界和形状。这个文件将被ECharts加载并渲染在地图上。创建以中国为中心的地图，我们需要设置地图的中心点。ECharts允许我们通过配置项`center`来设定地图的中心，例如： ```javascript option = { geo: { center: [120, 35], // 以东经120度，北纬35度（大致是中国的地理位置）作为地图中心 ... }, ... } ``` 然后，为了突出中国，我们可以调整地图的比例尺，使得中国区域显得更大，其他地区相对较小。这可以通过`zoom`配置项来实现： ```javascript option = { geo: { zoom: 1.5, // 设置地图缩放级别，1.5表示比默认放大50% ... }, ... } ``` 此外，ECharts提供了丰富的交互功能，如鼠标悬浮时显示提示框、点击高亮等。在这个实例中，我们可能还需要配置地图的事件监听器，例如： ```javascript option = { geo: { ... emphasis: { // 高亮样式 label: { show: true, // 显示高亮时的标签 color: 'red' // 修改标签颜色 }, itemStyle: { color: 'blue' // 修改区域颜色 } }, ... }, ... } ``` 在实际应用中，我们还可以结合后台数据，通过`series`中的`data`来设置每个区域的颜色或者大小，以展示不同国家或地区的统计信息。例如： ```javascript option = { ... series: [{ type: 'map', name: 'World', mapType: 'world', // 使用world地图 data: [ {name: 'China', value: 1300}, // 假设中国人口为1300万 {name: 'USA', value: 320}, ... ], ... }], ... } ``` 这个“以中国为中心Echart世界地图实例”为我们提供了一个很好的起点，学习如何使用ECharts定制地图，包括设置地图中心、调整比例尺、添加交互效果，以及结合数据进行可视化。开发者可以根据自己的需求，进一步自定义地图样式，实现更多复杂的功能，比如动态数据更新、地图动画等。通过深入理解和实践，可以更好地掌握ECharts在地图可视化方面的强大能力。

资源推荐

资源详情

资源评论

收起资源包目录

以中国为中心Echart世界地图实例.zip （3个子文件）

以中国为中心Echart世界地图实例

worldZH.js 1.82MB

买一送一：vue双向数据绑定原理.html 694B

以中国为中心Echart世界地图.html 34KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="./worldZH.js"></script> <style> * { margin: 0; padding: 0 } html, body { width: 100%; height: 100%; overflow: hidden; } #main { width: 100%; height: 100%; margin: 0px auto; border: 1px solid #ddd; } /*默认长宽比0.75*/ </style> </head> <body> <div id="main"> </div> <script type="text/javascript"> var geoCoordMap = { "Amsterdam": [4.895168, 52.370216], "Athens": [-83.357567, 33.951935], "Auckland": [174.763332, -36.84846], "Bangkok": [100.501765, 13.756331], "Barcelona": [2.173403, 41.385064], "Beijing": [116.407395, 39.904211], "Berlin": [13.404954, 52.520007], "Bogotá": [-74.072092, 4.710989], "Bratislava": [17.107748, 48.148596], "Brussels": [4.35171, 50.85034], "Budapest": [19.040235, 47.497912], "Buenos Aires": [-58.381559, -34.603684], "Bucharest": [26.102538, 44.426767], "Caracas": [-66.903606, 10.480594], "Chicago": [-87.629798, 41.878114], "Delhi": [77.209021, 28.613939], "Doha": [51.53104, 25.285447], "Dubai": [55.270783, 25.204849], "Dublin": [-6.26031, 53.349805], "Frankfurt": [8.682127, 50.110922], "Geneva": [6.143158, 46.204391], "Helsinki": [24.938379, 60.169856], "Hong Kong": [114.109497, 22.396428], "Istanbul": [28.978359, 41.008238], "Jakarta": [106.845599, -6.208763], "Johannesburg": [28.047305, -26.204103], "Cairo": [31.235712, 30.04442], "Kiev": [30.5234, 50.4501], "Copenhagen": [12.568337, 55.676097], "Kuala Lumpur": [101.686855, 3.139003], "Lima": [-77.042793, -12.046374], "Lisbon": [-9.139337, 38.722252], "Ljubljana": [14.505751, 46.056947], "London": [-0.127758, 51.507351], "Los Angeles": [-118.243685, 34.052234], "Luxembourg": [6.129583, 49.815273], "Lyon": [4.835659, 45.764043], "Madrid": [-3.70379, 40.416775], "Milan": [9.185924, 45.465422], "Manama": [50.58605, 26.228516], "Manila": [120.984219, 14.599512], "Mexico City": [-99.133208, 19.432608], "Miami": [-80.19179, 25.76168], "Montreal": [-73.567256, 45.501689], "Moscow": [37.6173, 55.755826], "Mumbai": [72.877656, 19.075984], "Munich": [11.581981, 48.135125], "Nairobi": [36.821946, -1.292066], "New York": [-74.005941, 40.712784], "Nicosia": [33.382276, 35.185566], "Oslo": [10.752245, 59.913869], "Paris": [2.352222, 48.856614], "Prague": [14.4378, 50.075538], "Riga": [24.105186, 56.949649], "Rio de Janeiro": [-43.172896, -22.906847], "Rome": [12.496366, 41.902783], "Santiago de Chile": [-70.669265, -33.44889], "São Paulo": [-46.633309, -23.55052], "Seoul": [126.977969, 37.566535], "Shanghai": [121.473701, 31.230416], "Singapore": [103.819836, 1.352083], "Sofia": [23.321868, 42.697708], "Stockholm": [18.068581, 59.329323], "Sydney": [151.209296, -33.86882], "Taipei": [121.565418, 25.032969], "Tallinn": [24.753575, 59.436961], "Tel Aviv": [34.781768, 32.0853], "Tokyo": [139.691706, 35.689487], "Toronto": [-79.383184, 43.653226], "Vilnius": [25.279651, 54.687156], "Warsaw": [21.012229, 52.229676], "Vienna": [16.373819, 48.208174], "Zurich": [8.541694, 47.376887] }; for (var key in geoCoordMap) { if (geoCoordMap[key][0] < -20) { geoCoordMap[key][0] += 360; } console.log(key + '---' + geoCoordMap[key]) } var rawData = [ ["Amsterdam", 101.6, 90.1, 77.1, 69.1, 78.3, 69.4, 1755, 24, 15, 7, 9, 44, 720, 1.651, 1.59, 2.205, 0.974, 0.93, 2.477, 67.4, 364, 690, 1113, 4960, 3.19, 30.05, 16.34, 24000, 689, 1.8, 50, 200, 390, 690, 1040, 2331, 1580, 17.5, 25.5, 30, 48400, 39200, 26300, 30200, 55400, 39800, 104400, 58700, 64600, 49200, 40300, 31100, 40300, 27700, 66700, 66700], ["Athens", 62.6, 60.5, 66.2, 58.2, 41.4, 40, 1822, 22, 29, 13, 25, 86, 590, 3.314, 2.991, 4.236, 1.349, 4.701, 3.1, 56.8, 390, 580, 880, 4620, 1.81, 13.81, 5.5, 24900, 389, 2.02, 54, 100, 210, 630, 1110, 1489, 647, 10.1, 13.5, 24, 26200, 23300, 18500, 17100, 24500, 24200, 57200, 44000, 34100, 30700, 21000, 17700, 15400, 16300, 34400, 34400], ["Auckland", 77.9, 82.9, 76.7, 67.8, 59.8, 63.5, 1852, 20, 15, 16, 7, 51, 580, 3.362, 2.377, 3.959, 2.116, 2.303, 4.027, 66.1, 496, 630, 1023, 4450, 2.57, 40.86, 13.62, 23900, 226, 1.33, 45, 190, 280, 560, 670, 1644, 1333, 16, 19.5, 17, 35700, 31500, 36500, 28500, 41800, 31100, 61300, 55000, 56300, 37300, 33400, 26900, 27200, 27500, 64900, 64900], ["Bangkok", 26.4, 31.4, 55.4, 48.2, 14.6, 17.4, 2312, 7, 36, 25, 20, 165, 550, 4.637, 2.242, 5.468, -0.845, 3.272, 3.807, 47, 422, 440, 414, 4370, 0.75, 3.47, 2.47, 29600, 103, 1, 56, 90, 320, 400, 600, 1463, 932, 4.4, 4.8, 5, 8300, 8400, 11100, 3000, 10900, 10900, 32200, 22400, 24600, 14500, 7800, 6000, 5800, 6500, 19400, 19400], ["Barcelona", 79.7, 78.6, 74.7, 65.6, 59.6, 58.7, 1760, 29, 18, 11, 6, 52, 740, 3.563, 2.844, 4.13, -0.238, 2.043, 3.052, 64, 393, 750, 984, 5000, 2.59, 41.96, 10.36, 26900, 177, 1.77, 51, 170, 330, 580, 1110, 1269, 1087, 14.8, 19.4, 23, 41300, 34100, 29100, 29800, 31500, 32100, 40800, 67000, 43100, 38900, 28900, 25500, 25000, 28000, 58300, 58300], ["Beijing", 28.2, 29.9, 60.3, 51.8, 17, 18, 1979, 9, 34, 27, 16, 184, 730, 1.467, 4.767, 5.852, -0.683, 3.325, 5.417, 50.6, 463, 420, 310, 4370, 0.26, 14.25, 3.64, 23800, 67, 1.24, 41, 160, 400, 660, 700, 1554, 660, 4.5, 5.6, 17, 11400, 7000, 8500, 7600, 6200, 11900, 13300, 11700, 10700, 18300, 17100, 8900, 5400, 7600, 19800, 19800], ["Berlin", 109.7, 97.1, 72.2, 64.1, 79.2, 70.1, 1742, 28, 16, 11, 9, 56, 720, 1.784, 2.276, 2.754, 0.234, 1.15, 2.483, 62.5, 389, 530, 841, 4670, 2.98, 80.3, 10.79, 35600, 246, 2.1, 34, 120, 230, 570, 710, 2395, 1178, 17.7, 25.8, 30, 56900, 38600, 35500, 28500, 47400, 57600, 84200, 74500, 72100, 51700, 38100, 28200, 32000, 28100, 81700, 81700], ["Bogotá", 41.4, 40.7, 53.1, 47, 22.3, 22, 1981, 15, 52, 34, 17, 142, 540, 4.296, 5.544, 6.998, 4.202, 2.27, 3.416, 45.8, 363, 410, 634, 4170, 0.84, null, 2.81, 20200, 303, 1.24, 25, 140, 300, 310, 440, 1554, 841, 5.5, 7.3, 12, 11100, 7600, 8400, 7000, 7300, 11900, 27600, 65800, 19700, 14600, 12300, 7400, 4100, 5300, 31900, 31900], ["Bratislava", 51.3, 50.7, 53.9, 47.1, 27.7, 27.3, 1884, 23, 31, 20, 19, 126, 490, 4.264, 1.89, 3.935, 0.925, 0.697, 4.079, 45.9, 344, 330, 414, 4740, 1.08, 22.97, 5.61, 26700, 65, 1.93, 28, 120, 230, 250, 340, 1683, 841, 6.9, 9, 22, 11300, 14100, 11300, 10000, 16300, 18900, 20300, 43300, 22800, 15800, 16100, 9600, 12600, 16400, 48300, 48300], ["Brussels", 107.5, 78.5, 75.8, 68.8, 81.5, 59.5, 1729, 20, 19, 10, 11, 54, 730, 2.337, 1.814, 4.493, -0.009, 2.332, 3.469, 67.1, 433, 690, 1243, 4580, 2.42, 26.03, 15.71, 23200, 500, 1.91, 63, 130, 280, 630, 800, 2538, 1839, 15, 26.5, 42, 44000, 36500, 38200, 34200, 52100, 43600, 97000, 73700, 67100, 56900, 42300, 35200, 33500, 36000, 78200, 78200], ["Budapest", 35.5, 32, 56.7, 50.4, 20.1, 18.1, 1912, 22, 49, 1

评论收藏

内容反馈