<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 世界地图示例</title>
<!-- 引入 ECharts -->
<script
src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></s
cript>
<!-- 引入世界地图数据 -->
<script
src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></scri
pt>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
geo: {
map: 'world',
roam: true, // 支持缩放和拖动
label: {
show: true, // 显示国家名称
fontSize: 8,
color: '#000'
},
itemStyle: {
areaColor: '#e0e0e0',
borderColor: '#999'
},
emphasis: {
label: {
show: true,
color: '#333'
},
itemStyle: {
areaColor: '#ccc'
}
}
},
series: [
{
name: '国家点',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 8,
itemStyle: {
color: 'red'
},
data: [
{name: 'China', value: [116.4074, 39.9042]},
{name: 'United States', value: [-100.0, 40.0]},
{name: 'Brazil', value: [-51.9253, -14.2350]},
{name: 'Australia', value: [133.7751, -25.2744]},
{name: 'Russia', value: [105.3188, 61.5240]},
{name: 'India', value: [78.9629, 20.5937]},
{name: 'South Africa', value: [22.9375, -30.5595]},
{name: 'United Kingdom', value: [-3.435973,
55.378051]},
{name: 'Japan', value: [138.2529, 36.2048]}
]
}
]
};
chart.setOption(option);
</script>
</body>
</html>