<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国历史人物热力分布图</title>
<script src="5.3.3/echarts.min.js"></script>
<script src="map/china.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family: "Microsoft YaHei"}
html,body{width:100%;height:100%;background:#111}
#main{width:100%;height:100%}
.controls{
position:fixed;top:10px;left:10px;z-index:999;
background:rgba(0,0,0,0.7);padding:10px;border-radius:8px;color:#fff
}
.controls button{
margin:3px;padding:4px 8px;cursor:pointer;border:none;border-radius:3px
}
.active{background:#09f;color:#fff}
</style>
</head>
<body>
<div class="controls">
<div>朝代：</div>
<button onclick="setEra('all')" class="active">全部</button>
<button onclick="setEra('先秦')">先秦</button>
<button onclick="setEra('汉')">汉</button>
<button onclick="setEra('唐')">唐</button>
<button onclick="setEra('宋')">宋</button>
<button onclick="setEra('明')">明</button>
<button onclick="setEra('清')">清</button>
<button onclick="setEra('近现代')">近现代</button>
<div style="margin-top:8px">类型：</div>
<button onclick="setCat('all')" class="active">全部</button>
<button onclick="setCat('思想家')">思想家</button>
<button onclick="setCat('文学家')">文学家</button>
<button onclick="setCat('政治家')">政治家</button>
<button onclick="setCat('军事家')">军事家</button>
</div>
<div id="main"></div>
<script>
const allFigures = [
{name:'孔子',province:'山东',coords:[117.12,35.55],era:'先秦',cat:'思想家',desc:'儒家创始人'},
{name:'孟子',province:'山东',coords:[116.58,35.74],era:'先秦',cat:'思想家',desc:'儒家亚圣'},
{name:'老子',province:'河南',coords:[115.48,33.88],era:'先秦',cat:'思想家',desc:'道家创始人'},
{name:'庄子',province:'河南',coords:[115.65,34.42],era:'先秦',cat:'思想家',desc:'道家代表'},
{name:'墨子',province:'山东',coords:[117.00,35.20],era:'先秦',cat:'思想家',desc:'墨家创始人'},
{name:'荀子',province:'山西',coords:[112.55,36.08],era:'先秦',cat:'思想家',desc:'儒家代表'},
{name:'韩非',province:'河南',coords:[113.65,34.76],era:'先秦',cat:'思想家',desc:'法家集大成'},
{name:'屈原',province:'湖北',coords:[110.67,30.33],era:'先秦',cat:'文学家',desc:'《离骚》作者'},
{name:'孙武',province:'山东',coords:[118.32,36.71],era:'先秦',cat:'军事家',desc:'《孙子兵法》'},
{name:'商鞅',province:'河南',coords:[114.30,35.80],era:'先秦',cat:'政治家',desc:'商鞅变法'},
{name:'刘邦',province:'江苏',coords:[117.20,34.27],era:'汉',cat:'帝王',desc:'汉高祖'},
{name:'项羽',province:'江苏',coords:[118.30,33.97],era:'汉',cat:'军事家',desc:'西楚霸王'},
{name:'司马迁',province:'陕西',coords:[110.08,35.52],era:'汉',cat:'文学家',desc:'《史记》'},
{name:'张骞',province:'陕西',coords:[107.23,33.07],era:'汉',cat:'探险家',desc:'丝绸之路'},
{name:'张衡',province:'河南',coords:[112.53,33.00],era:'汉',cat:'科学家',desc:'地动仪'},
{name:'华佗',province:'安徽',coords:[116.83,32.90],era:'汉',cat:'医学家',desc:'外科鼻祖'},
{name:'诸葛亮',province:'山东',coords:[119.02,35.59],era:'汉',cat:'政治家',desc:'蜀汉丞相'},
{name:'曹操',province:'安徽',coords:[116.83,33.85],era:'汉',cat:'政治家',desc:'魏武帝'},
{name:'李白',province:'四川',coords:[104.07,30.67],era:'唐',cat:'文学家',desc:'诗仙'},
{name:'杜甫',province:'河南',coords:[112.45,34.62],era:'唐',cat:'文学家',desc:'诗圣'},
{name:'王维',province:'山西',coords:[110.36,35.12],era:'唐',cat:'文学家',desc:'诗佛'},
{name:'白居易',province:'河南',coords:[114.30,35.80],era:'唐',cat:'文学家',desc:'新乐府'},
{name:'韩愈',province:'河南',coords:[114.30,35.80],era:'唐',cat:'文学家',desc:'唐宋八大家'},
{name:'柳宗元',province:'山西',coords:[111.52,35.15],era:'唐',cat:'文学家',desc:'唐宋八大家'},
{name:'玄奘',province:'河南',coords:[112.45,34.62],era:'唐',cat:'宗教家',desc:'西行取经'},
{name:'武则天',province:'山西',coords:[111.72,37.36],era:'唐',cat:'帝王',desc:'女皇'},
{name:'苏轼',province:'四川',coords:[103.83,30.05],era:'宋',cat:'文学家',desc:'唐宋八大家'},
{name:'欧阳修',province:'江西',coords:[115.10,27.12],era:'宋',cat:'文学家',desc:'唐宋八大家'},
{name:'王安石',province:'江西',coords:[114.94,28.55],era:'宋',cat:'政治家',desc:'王安石变法'},
{name:'司马光',province:'山西',coords:[110.36,35.12],era:'宋',cat:'政治家',desc:'《资治通鉴》'},
{name:'岳飞',province:'河南',coords:[114.30,35.80],era:'宋',cat:'军事家',desc:'民族英雄'},
{name:'朱熹',province:'福建',coords:[117.98,27.54],era:'宋',cat:'思想家',desc:'理学集大成'},
{name:'陆游',province:'浙江',coords:[120.15,30.27],era:'宋',cat:'文学家',desc:'爱国诗人'},
{name:'李清照',province:'山东',coords:[117.12,36.65],era:'宋',cat:'文学家',desc:'婉约词宗'},
{name:'辛弃疾',province:'山东',coords:[117.12,36.65],era:'宋',cat:'文学家',desc:'豪放词人'},
{name:'朱元璋',province:'安徽',coords:[117.38,32.92],era:'明',cat:'帝王',desc:'明太祖'},
{name:'王阳明',province:'浙江',coords:[121.55,29.87],era:'明',cat:'思想家',desc:'心学创始人'},
{name:'李时珍',province:'湖北',coords:[115.26,30.71],era:'明',cat:'医学家',desc:'《本草纲目》'},
{name:'郑和',province:'云南',coords:[102.71,25.05],era:'明',cat:'探险家',desc:'七下西洋'},
{name:'戚继光',province:'山东',coords:[122.10,37.52],era:'明',cat:'军事家',desc:'抗倭名将'},
{name:'吴承恩',province:'江苏',coords:[119.02,33.00],era:'明',cat:'文学家',desc:'《西游记》'},
{name:'施耐庵',province:'江苏',coords:[120.30,32.40],era:'明',cat:'文学家',desc:'《水浒传》'},
{name:'罗贯中',province:'山西',coords:[112.55,37.87],era:'明',cat:'文学家',desc:'《三国演义》'},
{name:'曹雪芹',province:'辽宁',coords:[123.43,41.80],era:'清',cat:'文学家',desc:'《红楼梦》'},
{name:'蒲松龄',province:'山东',coords:[118.01,36.81],era:'清',cat:'文学家',desc:'《聊斋志异》'},
{name:'林则徐',province:'福建',coords:[119.30,26.08],era:'清',cat:'政治家',desc:'虎门销烟'},
{name:'左宗棠',province:'湖南',coords:[112.98,28.20],era:'清',cat:'政治家',desc:'收复新疆'},
{name:'曾国藩',province:'湖南',coords:[112.98,27.83],era:'清',cat:'政治家',desc:'湘军创始人'},
{name:'李鸿章',province:'安徽',coords:[117.28,31.86],era:'清',cat:'政治家',desc:'洋务运动'},
{name:'康有为',province:'广东',coords:[113.26,22.15],era:'清',cat:'政治家',desc:'戊戌变法'},
{name:'梁启超',province:'广东',coords:[112.46,22.58],era:'清',cat:'思想家',desc:'维新派'},
{name:'孙中山',province:'广东',coords:[113.38,22.52],era:'近现代',cat:'政治家',desc:'国父'},
{name:'M泽东',province:'湖南',coords:[112.60,27.83],era:'近现代',cat:'政治家',desc:'共和国缔造'},
{name:'鲁迅',province:'浙江',coords:[120.15,30.00],era:'近现代',cat:'文学家',desc:'文学巨匠'},
{name:'胡适',province:'安徽',coords:[118.33,29.87],era:'近现代',cat:'思想家',desc:'新文化运动'},
{name:'陈独秀',province:'安徽',coords:[117.05,30.52],era:'近现代',cat:'政治家',desc:'新文化运动'},
{name:'蔡元培',province:'浙江',coords:[120.58,29.99],era:'近现代',cat:'教育家',desc:'北大校长'},
{name:'詹天佑',province:'广东',coords:[113.26,23.13],era:'近现代',cat:'科学家',desc:'铁路之父'},
{name:'钱学森',province:'浙江',coords:[120.15,30.27],era:'近现代',cat:'科学家',desc:'航天之父'},
{name:'邓稼先',province:'安徽',coords:[117.05,30.52],era:'近现代',cat:'科学家',desc:'两弹元勋'},
];
let myChart = echarts.init(document.getElementById('main'));
let currentEra = "all";
let currentCat = "all";
function refresh(){
let filtered = allFigures.filter(f => {
let e = currentEra === "all" || f.era === currentEra;
let c = currentCat === "all" || f.cat === currentCat;
return e && c;
});
let count = {};
filtered.forEach(f => {
count[f.province] = (count[f.province] || 0) + 1;
});
let data = [];
for(let p in count){
// 修复：确保 value 一定是数字，不会 undefined
data.push({name:p, value: count[p] || 0 });
}
let option = {
backgroundColor: '#1a1a1a',
tooltip: {
trigger: 'item',
formatter: function(params) {
// 核心修复：防止 NaN
let num = params.value || 0;
return `${params.name}<br/>人物数量：${num} 位`;
}
},
visualMap: {
min: 0,
max: 15,
left: 'left',
bottom: '20',
text: ['多','少'],
calculable: true,
textStyle:{color:'#fff'},
inRange: {
color: ['#e0f7ff', '#52d16f', '#ffc107', '#ff6b35', '#ff2929']
}
},
series: [{
type: 'map',
map: 'china',
roam: true,
data: data,
label: {
show: true,
color: '#fff'
},
itemStyle: {
borderColor: '#fff',
borderWidth:1,
areaColor: '#333'
}
}]
};
myChart.setOption(option);
}
function setEra(era){
currentEra = era;
document.querySelectorAll(".controls button").forEach(b=>b.classList.remove("active"));
event.target.classList.add("active");
refresh();
}
function setCat(cat){
currentCat = cat;
document.querySelectorAll(".controls button").forEach(b=>b.classList.remove("active"));
event.target.classList.add("active");
refresh();
}
window.addEventListener('resize', () => myChart.resize());
refresh();
</script>
</body>
</html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。