ECharts 中国地图省份数据展示
中国各省份数据可视化
展示各省份模拟数据分布情况
<div class="bg-white-white rounded-lg shadow-lg overflow-hidden">
<!-- 地图容器 -->
<div id="chinaMap" class="w-full h-[600px]"></div>
<!-- 控制面板 -->
<div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-wrap gap-4 justify-center">
<button id="resetBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-200">
重置视图
</button>
<button id="highlightBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-200">
高亮高值区域
</button>
<div class="text-gray-600 self-center">
数据类型: <select id="dataType" class="border border-gray-300 rounded-md px-2 py-1 ml-2">
<option value="population">人口数据</option>
<option value="gdp">GDP数据</option>
<option value="area">面积数据</option>
</select>
</div>
</div>
</div>
<div class="mt-6 bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-700 mb-3">图表说明</h2>
<ul class="text-gray-600 space-y-2">
<li>• 地图颜色越深表示对应省份的数据值越高</li>
<li>• 鼠标悬停在省份上可查看详细数据</li>
<li>• 点击省份可查看该省份的详细信息弹窗</li>
<li>• 可通过控制面板切换不同类型的数据展示</li>
</ul>
</div>
</div>
<script>
// 初始化地图实例
const mapDom = document.getElementById('chinaMap');
const myChart = echarts.init(mapDom);
// 生成模拟数据
function generateProvinceData(type) {
// 中国省份列表
const provinces = [
'北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
'上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南',
'湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州',
'云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '台湾',
'香港', '澳门'
];
// 根据数据类型生成不同范围的随机数据
return provinces.map(province => {
let value;
switch(type) {
case 'population':
// 人口数据 (单位: 百万人)
value = Math.random() * 100 + 1;
break;
case 'gdp':
// GDP数据 (单位: 千亿元)
value = Math.random() * 12 + 0.1;
break;
case 'area':
// 面积数据 (单位: 万平方公里)
value = Math.random() * 160 + 0.5;
break;
default:
value = Math.random() * 100;
}
return {
name: province,
value: parseFloat(value.toFixed(2))
};
});
}
// 更新地图数据和配置
function updateMapData(dataType) {
const data = generateProvinceData(dataType);
// 获取数据类型的文本描述和单位
let dataLabel, unit;
switch(dataType) {
case 'population':
dataLabel = '人口数据';
unit = '百万人';
break;
case 'gdp':
dataLabel = 'GDP数据';
unit = '千亿元';
break;
case 'area':
dataLabel = '面积数据';
unit = '万平方公里';
break;
}
// 配置地图选项
const option = {
title: {
text: `中国各省份${dataLabel}分布`,
left: 'center',
textStyle: {
fontSize: 18
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value} ${unit}`;
}
},
legend: {
orient: 'horizontal',
bottom: 10,
left: 'center',
data: [dataLabel]
},
visualMap: {
type: 'continuous',
min: Math.min(...data.map(item => item.value)),
max: Math.max(...data.map(item => item.value)),
left: 20,
top: 'center',
itemWidth: 10,
itemHeight: 120,
calculable: true,
label: {
show: true,
formatter: function(value) {
return value.toFixed(1);
}
},
color: ['#88398a', '#722ed1', '#4892fa', '#0fc6c2', '#1afa29']
},
series: [
{
name: dataLabel,
type: 'map',
mapType: 'china',
roam: true, // 允许缩放和平移
label: {
show: true, // 显示省份名称
fontSize: 10
},
emphasis: { // 鼠标悬停效果
label: {
show: true,
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: data,
// 区域样式
itemStyle: {
borderColor: '#fff',
borderWidth: 1
}
}
]
};
// 设置配置项，渲染地图
myChart.setOption(option);
}
// 初始加载人口数据
updateMapData('population');
// 事件监听 - 数据类型切换
document.getElementById('dataType').addEventListener('change', function() {
updateMapData(this.value);
});
// 事件监听 - 重置视图
document.getElementById('resetBtn').addEventListener('click', function() {
myChart.dispatchAction({
type: 'restore'
});
});
// 事件监听 - 高亮高值区域
document.getElementById('highlightBtn').addEventListener('click', function() {
const dataType = document.getElementById('dataType').value;
const data = generateProvinceData(dataType);
// 找出值最高的5个省份
const topProvinces = [...data]
.sort((a, b) => b.value - a.value)
.slice(0, 5)
.map(item => item.name);
// 高亮显示
myChart.dispatchAction({
type: 'highlight',
name: topProvinces
});
// 3秒后取消高亮
setTimeout(() => {
myChart.dispatchAction({
type: 'downplay',
name: topProvinces
});
}, 3000);
});
// 点击省份显示详情
myChart.on('click', function(params) {
if (params.componentType === 'series' && params.seriesType === 'map') {
alert(`${params.name}的详细数据:\n${params.value} ${
document.getElementById('dataType').value === 'population' ? '百万人' :
document.getElementById('dataType').value === 'gdp' ? '千亿元' : '万平方公里'
}`);
}
});
// 响应窗口大小变化
window.addEventListener('resize', function() {
myChart.resize();
});
</script>
