首页用echarts绘制世界地图

用echarts绘制世界地图

时间: 2023-10-02 12:04:14 浏览: 106

要使用 ECharts 绘制世界地图，需要先准备好地图数据和 ECharts 库。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>World Map Example</title>  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body>  <div id="map" style="width: 800px; height: 600px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('map')); // 配置项 var option = { tooltip: { trigger: 'item', formatter: '{b}' }, series: [ { name: '世界地图', type: 'map', mapType: 'world', selectedMode: 'single', label: { show: true }, itemStyle: { emphasis: { areaColor: '#ccc' } }, data: [ {name: '中国', selected: true}, {name: '美国', selected: true}, {name: '俄罗斯', selected: true}, {name: '巴西', selected: true}, {name: '澳大利亚', selected: true}, {name: '加拿大', selected: true}, {name: '阿根廷', selected: true}, {name: '印度', selected: true} ] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 这个示例代码使用 `mapType: 'world'` 来指定地图类型为世界地图，使用 `data` 属性指定了要显示的国家。可以根据自己的需求来修改配置项和数据，以实现不同的效果。

阅读全文