使用Echart.js和world.js實現(xiàn)世界地圖完整代碼
更新時間：2026年03月17日 10:32:59 作者：Laker?23
world.js是一個地圖數(shù)據(jù)處理插件,能夠?qū)⒌乩硇畔⑥D(zhuǎn)換為ECharts可識別的數(shù)據(jù)格式,使得開發(fā)者能夠在圖表中顯示地圖并進行地理數(shù)據(jù)的展示,這篇文章主要介紹了使用Echart.js和world.js實現(xiàn)世界地圖的相關(guān)資料,需要的朋友可以參考下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世界地圖 - 可交互數(shù)據(jù)可視化</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f0f2f5;
}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
color: #333;
margin: 0;
}
.map-container {
flex: 1;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
overflow: hidden;
}
#worldMap {
width: 100%;
height: 100%;
min-height: 600px;
}
.info-panel {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
display: none;
}
.info-panel.active {
display: block;
}
.info-panel h3 {
margin-top: 0;
color: #333;
}
.info-panel p {
margin: 10px 0;
color: #666;
line-height: 1.6;
}
.controls {
margin-top: 20px;
text-align: center;
}
.controls button {
margin: 0 10px;
padding: 8px 20px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #40a9ff;
}
.controls button:active {
background-color: #096dd9;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>世界地圖數(shù)據(jù)可視化</h1>
</div>
<div class="map-container">
<div id="worldMap"></div>
</div>
<div class="controls">
<button id="showPopulation">顯示人口數(shù)據(jù)</button>
<button id="showGDP">顯示GDP數(shù)據(jù)</button>
<button id="showArea">顯示面積數(shù)據(jù)</button>
<button id="resetMap">重置地圖</button>
</div>
</div>
<div id="countryInfo" class="info-panel">
<h3 id="countryName"></h3>
<p id="countryDetail"></p>
</div>
<script>
// 初始化地圖
const chartDom = document.getElementById('worldMap');
const myChart = echarts.init(chartDom);
// 模擬數(shù)據(jù) - 實際項目中可替換為真實數(shù)據(jù)
const populationData = [
{ name: 'China', value: 1402, color: '#000', backgroundColor: '#fff' },
{ name: 'India', value: 1366, color: '#fa8c16' },
{ name: 'United States', value: 331, color: '#52c41a' },
{ name: 'Indonesia', value: 273, color: '#1890ff' },
{ name: 'Pakistan', value: 225, color: '#722ed1' },
{ name: 'Brazil', value: 213, color: '#eb2f96' },
{ name: 'Nigeria', value: 206, color: '#faad14' },
{ name: 'Bangladesh', value: 165, color: '#13c2c2' },
{ name: 'Russia', value: 146, color: '#52c41a' },
{ name: 'Mexico', value: 129, color: '#722ed1' }
];
const gdpData = [
{ name: 'United States', value: 25.46, color: '#000' },
{ name: 'China', value: 17.92, color: '#000' },
{ name: 'Japan', value: 4.23, color: '#52c41a' },
{ name: 'Germany', value: 4.07, color: '#1890ff' },
{ name: 'India', value: 3.39, color: '#722ed1' },
{ name: 'United Kingdom', value: 3.07, color: '#eb2f96' },
{ name: 'France', value: 2.78, color: '#faad14' },
{ name: 'Italy', value: 2.08, color: '#13c2c2' },
{ name: 'Canada', value: 2.0, color: '#52c41a' },
{ name: 'South Korea', value: 1.81, color: '#722ed1' }
];
const areaData = [
{ name: 'Russia', value: 17.1, color: '#ff4d4f' },
{ name: 'Canada', value: 9.98, color: '#fa8c16' },
{ name: 'China', value: 9.6, color: '#fff' },
{ name: 'United States', value: 9.37, color: '#1890ff' },
{ name: 'Brazil', value: 8.51, color: '#722ed1' },
{ name: 'Australia', value: 7.69, color: '#eb2f96' },
{ name: 'India', value: 3.28, color: '#faad14' },
{ name: 'Argentina', value: 2.78, color: '#13c2c2' },
{ name: 'Kazakhstan', value: 2.72, color: '#52c41a' },
{ name: 'Algeria', value: 2.38, color: '#722ed1' }
];
// 國家詳細信息
const countryDetails = {
'China': '中國是世界上人口最多的國家，位于亞洲東部。首都北京，國土面積約960萬平方公里。',
'United States': '美國是世界上最大的經(jīng)濟體，位于北美洲。首都華盛頓，國土面積約937萬平方公里。',
'India': '印度是世界第二人口大國，位于南亞次大陸。首都新德里，國土面積約328萬平方公里。',
'Japan': '日本是一個島國，位于東亞。首都東京，是世界第三大經(jīng)濟體。',
'Germany': '德國位于歐洲中部，是歐洲最大的經(jīng)濟體。首都柏林。',
'Russia': '俄羅斯是世界上面積最大的國家，地跨歐亞兩洲。首都莫斯科。',
'Brazil': '巴西是南美洲最大的國家，以足球和熱帶雨林聞名。首都巴西利亞。'
};
// 基礎(chǔ)配置
let option = {
title: {
text: '世界地圖數(shù)據(jù)可視化',
left: 'center',
textStyle: {
color: '#333',
fontSize: 18
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.value) {
return params.name + '
' + getCurrentDataType() + ': ' + params.value;
}
return params.name;
}
},
legend: {
orient: 'vertical',
left: 'left',
show: false
},
visualMap: {
type: 'continuous',
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#e6f7ff', '#1890ff']
}
},
series: [
{
name: '數(shù)據(jù)',
type: 'map',
map: 'world',
roam: true,
emphasis: {
label: {
show: true,
color: '#333',
fontSize: 12
},
itemStyle: {
areaColor: '#f0f9ff',
borderColor: '#1890ff',
borderWidth: 2
}
},
select: {
itemStyle: {
areaColor: '#000'
},
label: {
show: true,
color: '#fff'
},
color: '#fff'
},
data: populationData
}
]
};
let currentDataType = '人口(百萬)';
let currentData = populationData;
// 獲取當前數(shù)據(jù)類型文本
function getCurrentDataType() {
return currentDataType;
}
// 更新地圖數(shù)據(jù)
function updateMapData(data, type, maxValue) {
currentData = data;
currentDataType = type;
option.visualMap.max = maxValue;
option.series[0].data = data;
option.title.text = '世界地圖 - ' + type + '數(shù)據(jù)可視化';
myChart.setOption(option);
}
// 重置地圖
function resetMap() {
myChart.dispatchAction({
type: 'restore'
});
document.getElementById('countryInfo').classList.remove('active');
}
// 綁定點擊事件
myChart.on('click', function (params) {
const countryInfo = document.getElementById('countryInfo');
const countryName = document.getElementById('countryName');
const countryDetail = document.getElementById('countryDetail');
countryName.textContent = params.name;
countryDetail.textContent = countryDetails[params.name] || '暫無詳細信息';
countryInfo.classList.add('active');
});
// 點擊空白區(qū)域關(guān)閉信息面板
myChart.getZr().on('click', function () {
document.getElementById('countryInfo').classList.remove('active');
});
// 綁定按鈕事件
document.getElementById('showPopulation').addEventListener('click', function () {
updateMapData(populationData, '人口(百萬)', 1500);
});
document.getElementById('showGDP').addEventListener('click', function () {
updateMapData(gdpData, 'GDP(萬億美元)', 30);
});
document.getElementById('showArea').addEventListener('click', function () {
updateMapData(areaData, '面積(百萬平方公里)', 20);
});
document.getElementById('resetMap').addEventListener('click', resetMap);
// 響應(yīng)式調(diào)整
window.addEventListener('resize', function () {
myChart.resize();
});
// 設(shè)置配置項
myChart.setOption(option);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>世界地圖-大洲高亮</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<style>
#worldMap {
width: 100%;
height: 100vh;
background: #f0f2f5;
}
</style>
</head>
<body>
<div id="worldMap"></div>
<script>
// 完整的國家到大洲映射
const countryToContinent = {
'China': '亞洲', 'Japan': '亞洲', 'South Korea': '亞洲', 'India': '亞洲',
'Indonesia': '亞洲', 'Thailand': '亞洲', 'Vietnam': '亞洲', 'Malaysia': '亞洲',
'Germany': '歐洲', 'France': '歐洲', 'United Kingdom': '歐洲', 'Italy': '歐洲',
'Spain': '歐洲', 'Russia': '歐洲', 'United States': '北美洲', 'Canada': '北美洲',
'Mexico': '北美洲', 'Brazil': '南美洲', 'Argentina': '南美洲', 'Egypt': '非洲',
'South Africa': '非洲', 'Australia': '大洋洲', 'New Zealand': '大洋洲',
// 此處應(yīng)包含所有200+國家地區(qū)的完整映射
// 為節(jié)省篇幅已簡化，實際使用時需補全
};
// 生成大洲國家列表
const continentMap = {};
Object.entries(countryToContinent).forEach(([country, continent]) => {
if (!continentMap[continent]) {
continentMap[continent] = [];
}
continentMap[continent].push(country);
});
const chart = echarts.init(document.getElementById('worldMap'));
const option = {
tooltip: {
trigger: 'item',
formatter: params => {
const continent = countryToContinent[params.name] || '未知大洲';
return `<div style="padding:5px">${continent}</div>`;
}
},
series: [{
type: 'map',
map: 'world',
roam: true,
itemStyle: {
normal: {
areaColor: '#E0E0E0',
borderColor: '#FFF',
borderWidth: 0.5
}
},
emphasis: {
disabled: true // 禁用默認高亮
}
}]
};
// 事件處理
chart.on('mouseover', { seriesIndex: 0 }, (e) => {
const continent = countryToContinent[e.name];
if (continent && continentMap[continent]) {
chart.setOption({
series: [{
regions: continentMap[continent].map(country => ({
name: country,
itemStyle: {
areaColor: '#ff0000',
borderColor: '#333',
borderWidth: 1
}
}))
}]
});
}
});
chart.on('globalout', () => {
chart.setOption({
series: [{
regions: []
}]
});
});
chart.setOption(option);
window.addEventListener('resize', chart.resize);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世界地圖 - 大洲聯(lián)動高亮</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link rel="external nofollow" rel="stylesheet">
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!-- 配置Tailwind自定義顏色 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
accent: '#722ED1',
neutral: '#1F2937',
'neutral-light': '#F3F4F6',
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<!-- 自定義工具類 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.map-container {
height: 70vh;
min-height: 500px;
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
</style>
</head>
<body class="font-inter bg-gray-50 text-neutral">
<!-- 頁面頭部 -->
<header class="bg-white shadow-md py-4 px-6 md:px-12">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<i class="fa fa-globe text-primary text-2xl"></i>
<h1 class="text-xl md:text-2xl font-bold text-neutral">世界地圖可視化</h1>
</div>
<div class="text-sm text-gray-500">
<p>交互提示：鼠標懸?；螯c擊國家，查看所屬大洲聯(lián)動高亮效果</p>
</div>
</div>
</header>
<!-- 主要內(nèi)容區(qū) -->
<main class="container mx-auto p-6 md:p-12">
<!-- 控制面板 -->
<div class="bg-white rounded-lg p-4 mb-6 card-shadow">
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-green-400 inline-block mr-2"></span>
<span class="text-sm">亞洲</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-yellow-400 inline-block mr-2"></span>
<span class="text-sm">非洲</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-400 inline-block mr-2"></span>
<span class="text-sm">歐洲</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-red-400 inline-block mr-2"></span>
<span class="text-sm">北美洲</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-400 inline-block mr-2"></span>
<span class="text-sm">南美洲</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-pink-400 inline-block mr-2"></span>
<span class="text-sm">大洋洲</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-gray-400 inline-block mr-2"></span>
<span class="text-sm">南極洲</span>
</div>
<button id="reset-btn"
class="ml-auto px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm flex items-center">
<i class="fa fa-refresh mr-1"></i> 重置視圖
</button>
</div>
</div>
<!-- 地圖容器 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div id="map-loading" class="w-full map-container flex flex-col items-center justify-center text-gray-500">
<i class="fa fa-spinner fa-spin mr-2 text-2xl mb-4"></i>
<p>正在加載地圖數(shù)據(jù)...</p>
</div>
<div id="map" class="w-full map-container hidden"></div>
<div id="map-error"
class="w-full map-container flex flex-col items-center justify-center text-red-500 p-6 hidden">
<i class="fa fa-exclamation-circle mr-2 text-2xl mb-4"></i>
<p class="text-center mb-4">地圖加載失敗</p>
<button id="retry-btn"
class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm flex items-center">
<i class="fa fa-refresh mr-1"></i> 重試加載
</button>
</div>
</div>
<!-- 信息面板 -->
<div id="info-panel" class="mt-6 bg-white rounded-lg p-6 card-shadow hidden fade-in">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i class="fa fa-info-circle text-primary mr-2"></i>
<span id="info-title">區(qū)域信息</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500 mb-1">國家/地區(qū)</p>
<p id="country-name" class="font-medium">-</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">所屬大洲</p>
<p id="continent-name" class="font-medium">-</p>
</div>
</div>
</div>
</main>
<!-- 頁腳 -->
<footer class="bg-neutral text-white py-6 px-6 mt-12">
<div class="container mx-auto text-center text-sm">
<p>世界地圖可視化演示 | 使用 ECharts.js 實現(xiàn)</p>
</div>
</footer>
<script>
// 大洲與數(shù)值映射（用于visualMap顏色映射）
const continentValue = {
'亞洲': 1,
'非洲': 2,
'歐洲': 3,
'北美洲': 4,
'南美洲': 5,
'大洋洲': 6,
'南極洲': 7
};
// 大洲顏色映射
const continentColors = {
'亞洲': '#86e07a', // 綠色
'非洲': '#f9e378', // 黃色
'歐洲': '#7cb5ec', // 藍色
'北美洲': '#f77976', // 紅色
'南美洲': '#c293e2', // 紫色
'大洋洲': '#f7a3c4', // 粉色
'南極洲': '#d3d3d3' // 灰色
};
// 大洲高亮顏色映射
const highlightColors = {
'亞洲': '#52c41a', // 深綠色
'非洲': '#faad14', // 深黃色
'歐洲': '#1890ff', // 深藍色
'北美洲': '#f5222d', // 深紅色
'南美洲': '#722ed1', // 深紫色
'大洋洲': '#eb2f96', // 深粉色
'南極洲': '#8c8c8c' // 深灰色
};
// 國家與大洲的映射關(guān)系
const countryToContinent = {
// 亞洲國家
'China': '亞洲',
'Japan': '亞洲',
'South Korea': '亞洲',
'India': '亞洲',
'Indonesia': '亞洲',
'Saudi Arabia': '亞洲',
'Turkey': '亞洲',
// 非洲國家
'South Africa': '非洲',
'Nigeria': '非洲',
'Egypt': '非洲',
'Kenya': '非洲',
// 歐洲國家
'Germany': '歐洲',
'France': '歐洲',
'United Kingdom': '歐洲',
'Russia': '歐洲',
'Italy': '歐洲',
// 北美洲國家
'United States of America': '北美洲',
'United States': '北美洲',
'Canada': '北美洲',
'Mexico': '北美洲',
'Cuba': '北美洲',
// 南美洲國家
'Brazil': '南美洲',
'Argentina': '南美洲',
'Chile': '南美洲',
// 大洋洲國家
'Australia': '大洋洲',
'New Zealand': '大洋洲',
// 南極洲
'Antarctica': '南極洲'
};
// 初始化圖表
let chart;
// 存儲所有國家數(shù)據(jù)
let allCountries = [];
let mapLoading = false;
// 加載世界地圖數(shù)據(jù)
function loadMapData() {
if (mapLoading) return;
mapLoading = true;
document.getElementById('map-loading').classList.remove('hidden');
document.getElementById('map').classList.add('hidden');
document.getElementById('map-error').classList.add('hidden');
// 多數(shù)據(jù)源嘗試
const mapSources = [
'https://cdn.jsdelivr.net/npm/echarts/map/js/world.js',
'https://unpkg.com/echarts@5.4.3/map/js/world.js'
];
const loadWithSource = (sourceIndex) => {
if (sourceIndex >= mapSources.length) {
console.error('所有地圖數(shù)據(jù)源加載失敗');
mapLoading = false;
document.getElementById('map-loading').classList.add('hidden');
document.getElementById('map-error').classList.remove('hidden');
return;
}
const script = document.createElement('script');
script.src = mapSources[sourceIndex];
script.onload = function () {
console.log(`地圖數(shù)據(jù)從 ${mapSources[sourceIndex]} 加載成功`);
mapLoading = false;
initMap();
};
script.onerror = function () {
console.error(`地圖數(shù)據(jù)從 ${mapSources[sourceIndex]} 加載失敗，嘗試下一個`);
document.body.removeChild(script);
loadWithSource(sourceIndex + 1);
};
setTimeout(() => {
if (mapLoading) {
console.error(`地圖數(shù)據(jù)加載超時`);
document.body.removeChild(script);
loadWithSource(sourceIndex + 1);
}
}, 8000);
document.body.appendChild(script);
};
loadWithSource(0);
}
// 獲取國家數(shù)據(jù)
function getCountryData() {
const data = [];
Object.keys(countryToContinent).forEach(country => {
const continent = countryToContinent[country];
data.push({
name: country,
value: continentValue[continent],
continent: continent,
itemStyle: {
color: continentColors[continent]
},
emphasis: {
itemStyle: {
color: highlightColors[continent]
}
}
});
});
allCountries = data;
return data;
}
// 獲取指定大洲的所有國家
function getCountriesInContinent(continent) {
return allCountries
.filter(country => country.continent === continent)
.map(country => country.name);
}
// 初始化地圖
function initMap() {
if (typeof echarts === 'undefined' || !echarts.getMap('world')) {
console.error('ECharts或地圖數(shù)據(jù)未正確加載');
document.getElementById('map-loading').classList.add('hidden');
document.getElementById('map-error').classList.remove('hidden');
mapLoading = false;
return;
}
document.getElementById('map-loading').classList.add('hidden');
document.getElementById('map').classList.remove('hidden');
chart = echarts.init(document.getElementById('map'));
// ECharts配置項
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
formatter: function (params) {
if (!params || !params.data) {
return `${params.name}
所屬大洲: 未定義`;
}
return `${params.name}
所屬大洲: ${params.data.continent || '未知'}`;
}
},
series: [
{
name: '世界地圖',
type: 'map',
mapType: 'world',
roam: true,
zoom: 1.2,
label: {
show: false
},
itemStyle: {
borderColor: '#fff',
borderWidth: 0.5
},
// 關(guān)鍵修改：設(shè)置選中模式
selectedMode: 'multiple',
// 選中樣式配置 - 提高優(yōu)先級
select: {
itemStyle: {
// 使用更明顯的顏色差異
color: function (params) {
const color = highlightColors[params.data.continent];
console.log(`選中 ${params.name} (${params.data.continent}) 顏色: ${color}`);
return color || '#ffd700';
},
// 增加選中狀態(tài)的視覺效果
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
label: {
show: true,
color: '#fff',
fontWeight: 'bold',
shadowBlur: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
// 鼠標懸停樣式
emphasis: {
label: {
show: true,
color: '#333',
fontWeight: 'bold'
},
itemStyle: {
color: function (params) {
return highlightColors[params.data.continent] || '#ccc';
}
}
},
data: getCountryData()
}
]
};
chart.setOption(option);
bindEvents();
}
// 高亮指定大洲的所有國家
function highlightContinent(continent) {
if (!chart) return;
console.log(`高亮大洲: ${continent}`);
// 重置所有選中狀態(tài)
// chart.dispatchAction({
// type: 'unselect',
// seriesIndex: 0
// });
if (!continent) return;
const countries = getCountriesInContinent(continent);
console.log(`需要高亮的國家:`, countries);
// 觸發(fā)選中事件，顯式設(shè)置選中狀態(tài)
countries.forEach(country => {
chart.dispatchAction({
type: 'select',
seriesIndex: 0,
name: country
});
});
}
// 顯示國家信息
function showCountryInfo(countryName) {
const continent = countryToContinent[countryName] || '未知';
document.getElementById('country-name').textContent = countryName;
document.getElementById('continent-name').textContent = continent;
document.getElementById('info-title').textContent = `${countryName} - 區(qū)域信息`;
document.getElementById('info-panel').classList.remove('hidden');
}
// 重置地圖
function resetMap() {
if (chart) {
chart.dispatchAction({
type: 'unselect',
seriesIndex: 0
});
document.getElementById('info-panel').classList.add('hidden');
}
}
// 綁定事件
function bindEvents() {
if (!chart) return;
// 鼠標懸停事件
chart.on('mouseover', function (params) {
if (params.componentType === 'series' && params.seriesType === 'map') {
const continent = countryToContinent[params.name];
if (continent) {
highlightContinent(continent);
showCountryInfo(params.name);
}
}
});
// 點擊事件
chart.on('click', function (params) {
if (params.componentType === 'series' && params.seriesType === 'map') {
const continent = countryToContinent[params.name];
if (continent) {
highlightContinent(continent);
showCountryInfo(params.name);
}
}
});
// 鼠標離開地圖
chart.on('globalout', function () {
chart.dispatchAction({
type: 'unselect',
seriesIndex: 0
});
});
// 窗口大小變化
window.addEventListener('resize', function () {
chart && chart.resize();
});
}
// 初始化
function init() {
document.getElementById('retry-btn').addEventListener('click', loadMapData);
document.getElementById('reset-btn').addEventListener('click', resetMap);
loadMapData();
}
window.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
到此這篇關(guān)于使用Echart.js和world.js實現(xiàn)世界地圖的文章就介紹到這了,更多相關(guān)Echart.js和world.js世界地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在前端快速發(fā)展地過程中,為了契合更好的設(shè)計模式,產(chǎn)生了 fetch 框架,下面這篇文章主要給大家介紹了關(guān)于JavaScript中fetch()用法的相關(guān)資料,需要的朋友可以參考下2022-06-06
js跨域我用的比較多的就是jsonp和程序代理。但是jsonp只能用get，而且是js異步調(diào)用，有時候不能滿足項目要求2012-08-08
JavaScript對象和字串之間的轉(zhuǎn)換實例探討
從對象的格式可以看出，如果字串的格式定義成 json 格式的， 就可以直接轉(zhuǎn)換為obj了，感興趣的朋友可以參考下哈2013-04-04
'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最
這篇文章主要介紹了'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最新解決方法,文中給大家補充介紹了webpack-dev-server的介紹與用法，需要的朋友可以參考下2023-02-02
這個例子,首先是把SPAN里的內(nèi)容用display:none;干掉,就是不顯示; 然后在A:HOVER時,再把SPAN里的內(nèi)容display:block; 就是顯示出來;同時定義一下SPAN的位置; 其它代碼很簡單,但有人說看不太懂;我就簡單說一下;2008-06-06
這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
9行javascript代碼獲取QQ群成員具體實現(xiàn)
22 行 JavaScript 代碼實現(xiàn) QQ 群成員提取器，如果沒有達到效果可能原因一是QQ版本升級了，二是博客里面的代碼也有些繁瑣2013-10-10
下面小編就為大家?guī)硪黄猨s中class的點擊事件沒有效果的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript 監(jiān)聽textarea中按鍵事件
不同的瀏覽器中的事件監(jiān)聽機制是不同的，以onKeyPress事件為例。2009-10-10
JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹
這篇文章主要介紹了JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹,本文講解了object自動轉(zhuǎn)換成string的規(guī)則、object自動轉(zhuǎn)換成number的規(guī)則等內(nèi)容,需要的朋友可以參考下2014-12-12