<!DOCTYPE html>
<html>
<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/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%;height:600px;"></div>
<script>
// 异步加载地图数据
$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function(chinaJson) {
var chart = echarts.init(document.getElementById('map'));
echarts.registerMap('china', chinaJson);
// 牛只分布数据
var cattleData = [
{name: '内蒙古', value: [111.76, 40.82, 280]},
{name: '新疆', value: [87.62, 43.82, 190]},
{name: '黑龙江', value: [126.53, 45.80, 150]},
{name: '四川', value: [104.06, 30.67, 120]},
{name: '云南', value: [102.73, 25.04, 90]}
];
var option = {
title: {
text: '中国主要牧区牛只分布',
subtext: '数据更新时间：2025-06-29',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function(params) {
if(params.seriesType === 'scatter') {
return params.name + '<br/>存栏量: ' + params.value[2] + '万头';
}
return params.name;
}
},
visualMap: {
min: 0,
max: 300,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#1e90ff', '#ff4500']
}
},
geo: {
map: 'china',
roam: true,
label: {
show: true,
color: '#333',
fontSize: 10
},
emphasis: {
label: {
color: '#fff'
},
itemStyle: {
areaColor: '#389af4'
}
},
itemStyle: {
areaColor: '#e6f7ff',
borderColor: '#aaa'
}
},
series: [{
name: '牛只数量',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: function(val) {
return Math.sqrt(val[2]) * 3;
},
data: cattleData,
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
color: '#d63031'
}
}]
};
chart.setOption(option);
window.addEventListener('resize', chart.resize);
});
</script>
</body>
</html>
