javascript: 中国历史人物热力图

博客园 - ®Geovin Du Dream Park™

go: Functional Options Pattern go:Timing Functions Pattern python: Timing Functions Pattern go: Steady-State Pattern python: Steady-State Pattern go: Handshaking Pattern python: Handshaking Pattern go: Fail-Fast Pattern python: Fail-Fast Pattern I go: Deadline Pattern python: Deadline Pattern go: Circuit-Breaker Pattern python: Circuit-Breaker Pattern go: Bulkheads Pattern python: Bulkheads Pattern go: Push & Pull Pattern python: Push & Pull Pattern python: Publish/Subscribe Pattern II go: Publish/Subscribe Pattern python: Publish/Subscribe Pattern go: Futures & Promises Pattern python: Futures & Promises Pattern go: Worker Pool Pattern go：Pipeline Pattern python: Worker Pool Pattern python: Pipeline Pattern go: Fan-Out Pattern python: Fan-Out Pattern go: Fan-In Pattern python: Fan-In Pattern Fan-In go: Producer Consumer Pattern python: Producer Consumer Pattern go: Parallelism Pattern python: Parallelism Pattern go: Reactor Pattern python: Reactor Pattern go: Generators Pattern python: speech to text offline python: Generators Pattern go: Coroutines Pattern python:Coroutines Pattern go: Broadcast Pattern python: Broadcast Pattern python: Bounded Parallelism Pattern go: Bounded Parallelism Pattern python: N-Barrier Pattern go: N-Barrier Pattern python: Semaphore Pattern go: Semaphore Pattern python: Read-Write Lock Pattern go: Read-Write Lock Pattern python: Monitor Pattern go: Monitor Pattern python: Mutex Pattern go: Lock/Mutex Pattern Python: Condition Variable Pattern go:Condition Variable Pattern python: Registry Pattern python: Interpreter Pattern go: Interpreter Pattern go: Registry Pattern go: Memento Pattern go: Command Pattern go: State Pattern go:Template Method Pattern go: Strategy Pattern go: Visitor Pattern go: Observer Pattern go: Mediator Pattern go: Iterator Pattern go: Chain of Responsibility Pattern go: Proxy Pattern go:Decorator Pattern go: Facade Pattern go: Flyweight Pattern go: Composite Pattern go: Singleton Pattern go: Prototype Pattern go: Bridge Pattern go: Adapter Pattern go: Builder Pattern 密码进行加盐哈希 using CSharp,Python,Go,Java go: Abstract Factory Pattern go: Model，Interface，DAL ，Factory，BLL using mysql go: Simple Factory Pattern go: Factory Method Pattern go: goLang 在Windows环境搭建Go语言开发环境 CSharp: Parallel Extensions cpp: class python: 蝴蝶跟随鼠标 javascript: 中国历史人物热力分布图using echart python: 初养龙虾微信纯文字自动回复using workBuddy python: object 入门 python: Factory Method Pattern python: Simple Factory Pattern python: Abstract Factory Pattern 区域化代码 python: Null Object Pattern python: Builder Pattern python: Adapter Pattern

®Geovin Du Dream Park™ · 2026-03-21 · via 博客园 - ®Geovin Du Dream Park™

<!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="4.9.0/echarts.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#e0e6f0;font-family:'Microsoft YaHei','微软雅黑',sans-serif;min-height:100vh;display:flex;flex-direction:column}
header{text-align:center;padding:16px 20px 6px}
header h1{font-size:1.6rem;letter-spacing:4px;color:#f0c060;text-shadow:0 0 15px rgba(240,192,96,.5)}
header p{margin-top:4px;font-size:.78rem;color:#8899bb}
.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:10px 20px}
.btn{padding:5px 14px;border:1px solid #334466;border-radius:18px;background:rgba(255,255,255,.03);color:#aabbdd;cursor:pointer;font-size:.75rem;transition:all .2s}
.btn:hover,.btn.active{background:rgba(240,192,96,.12);border-color:#f0c060;color:#f0c060}
#chart{flex:1;min-height:450px}
.msg{padding:20px;text-align:center;color:#667788;font-size:.9rem}
</style>
</head>
<body>
<header>
  <h1>中国历史人物热力图</h1>
  <p>按出生地省份分布</p>
</header>
<div class="controls">
  <button class="btn active" onclick="filterEra('all',this)">全部</button>
  <button class="btn" onclick="filterEra('先秦',this)">先秦</button>
  <button class="btn" onclick="filterEra('汉',this)">汉</button>
  <button class="btn" onclick="filterEra('唐',this)">唐</button>
  <button class="btn" onclick="filterEra('宋',this)">宋</button>
  <button class="btn" onclick="filterEra('明',this)">明</button>
  <button class="btn" onclick="filterEra('清',this)">清</button>
  <button class="btn" onclick="filterEra('近现代',this)">近现代</button>
</div>
<div id="chart"><div class="msg">正在加载地图...</div></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:'两弹元勋'},
];

const PROVINCE_MAP={
  '北京':'北京','天津':'天津','上海':'上海','重庆':'重庆',
  '河北':'河北','山西':'山西','辽宁':'辽宁','吉林':'吉林','黑龙江':'黑龙江',
  '江苏':'江苏','浙江':'浙江','安徽':'安徽','福建':'福建','江西':'江西',
  '山东':'山东','河南':'河南','湖北':'湖北','湖南':'湖南','广东':'广东',
  '海南':'海南','四川':'四川','贵州':'贵州','云南':'云南','陕西':'陕西',
  '甘肃':'甘肃','青海':'青海','内蒙古':'内蒙古','广西':'广西','西藏':'西藏',
  '宁夏':'宁夏','新疆':'新疆',
};

let chart,currentEra='all';

function initChart(){
  chart=echarts.init(document.getElementById('chart'));
  loadMapAndRender();
}

function loadMapAndRender(){
  // 加载本地地图文件
  fetch('areas_v3/100000_full.json').then(r=>r.json()).then(geoJson=>{
    echarts.registerMap('china',geoJson);
    render(currentEra);
  }).catch(e=>{
    document.getElementById('chart').innerHTML='<div class="msg">地图加载失败: '+e.message+'</div>';
  });
}

function getFilteredData(era){
  const figs=era==='all'?allFigures:allFigures.filter(f=>f.era===era);
  const cnt={},names={};
  figs.forEach(f=>{
    const p=PROVINCE_MAP[f.province]||f.province;
    cnt[p]=(cnt[p]||0)+1;
    if(!names[p])names[p]=[];
    names[p].push(f.name);
  });
  const mapData=Object.entries(cnt).map(([n,v])=>({name:n,value:v,figures:names[n]}));
  const scatterData=figs.map(f=>({name:f.name,value:[...f.coords,1],era:f.era,cat:f.cat,desc:f.desc}));
  const max=Math.max(...Object.values(cnt),1);
  return{mapData,scatterData,max};
}

function render(era){
  const{mapData,scatterData,max}=getFilteredData(era);
  chart.setOption({
    backgroundColor:'#0a0e1a',
    tooltip:{trigger:'item',backgroundColor:'rgba(10,14,30,0.95)',borderColor:'#334466',textStyle:{color:'#e0e6f0'},
      formatter:function(p){
        if(p.seriesType==='map'){
          const figs=p.data&&p.data.figures?p.data.figures:[];
          return `<b style="color:#f0c060">${p.name}</b><br/>${p.value||0}位<br/>${figs.slice(0,8).join('、')}${figs.length>8?'…':''}`;
        }
        return `<b style="color:#f0c060">${p.name}</b><br/>${p.data.era}·${p.data.cat}<br/><span style="color:#8899bb">${p.data.desc}</span>`;
      }
    },
    visualMap:{min:0,max:max,left:12,bottom:30,text:['多','少'],textStyle:{color:'#8899bb'},
      inRange:{color:['#0d1a3a','#1a3a6a','#2a5a9a','#e08020','#f0c060']},calculable:true,orient:'vertical'},
    geo:{map:'china',roam:true,zoom:1.2,center:[105,36],label:{show:false},
      itemStyle:{normal:{areaColor:'#0d1530',borderColor:'#1a3060'},emphasis:{areaColor:'#1a3a6a'}}},
    series:[
      {name:'分布',type:'map',map:'china',geoIndex:0,data:mapData,tooltip:{show:true}},
      {name:'人物',type:'effectScatter',coordinateSystem:'geo',data:scatterData,symbolSize:7,
        showEffectOn:'render',rippleEffect:{brushType:'stroke',scale:3,period:3},
        itemStyle:{normal:{color:'#f0c060',shadowBlur:10,shadowColor:'rgba(240,192,96,0.6)'}}}
    ]
  },true);
}

function filterEra(era,btn){
  currentEra=era;
  document.querySelectorAll('.btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  if(chart)render(era);
}

window.onload=initChart;
window.onresize=()=>chart&&chart.resize();
</script>
</body>
</html>

<!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="4.9.0/echarts.min.js"></script>
<script src="china.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#e0e6f0;font-family:'Microsoft YaHei','微软雅黑',sans-serif;min-height:100vh}
header{text-align:center;padding:12px}
header h1{font-size:1.4rem;color:#f0c060}
header p{color:#8899bb;margin-top:3px;font-size:.75rem}
.filters{padding:10px 15px;background:rgba(0,0,0,.2)}
.filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0}
.filter-label{color:#8899bb;font-size:.75rem;min-width:45px}
.btn{padding:4px 12px;border:1px solid #334466;border-radius:16px;background:rgba(255,255,255,.03);color:#aabbdd;cursor:pointer;font-size:.72rem;transition:all .2s}
.btn:hover,.btn.active{background:rgba(240,192,96,.15);border-color:#f0c060;color:#f0c060}
.stats-bar{display:flex;justify-content:center;gap:20px;padding:8px;background:rgba(0,0,0,.15);flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{font-size:1.2rem;color:#f0c060;font-weight:bold}
.stat-label{font-size:.65rem;color:#667788}
#chart{width:100%;height:calc(100vh - 180px);min-height:400px}
</style>
</head>
<body>
<header>
  <h1>📜 中国历史人物分布</h1>
  <p>鼠标悬停省份查看统计</p>
</header>

<div class="filters">
  <div class="filter-row">
    <span class="filter-label">朝代：</span>
    <button class="btn active" data-filter="era" data-value="all" onclick="filterBy('era','all',this)">全部</button>
    <button class="btn" data-filter="era" data-value="先秦" onclick="filterBy('era','先秦',this)">先秦</button>
    <button class="btn" data-filter="era" data-value="汉" onclick="filterBy('era','汉',this)">汉</button>
    <button class="btn" data-filter="era" data-value="唐" onclick="filterBy('era','唐',this)">唐</button>
    <button class="btn" data-filter="era" data-value="宋" onclick="filterBy('era','宋',this)">宋</button>
    <button class="btn" data-filter="era" data-value="明" onclick="filterBy('era','明',this)">明</button>
    <button class="btn" data-filter="era" data-value="清" onclick="filterBy('era','清',this)">清</button>
    <button class="btn" data-filter="era" data-value="近现代" onclick="filterBy('era','近现代',this)">近现代</button>
  </div>
  <div class="filter-row">
    <span class="filter-label">类型：</span>
    <button class="btn active" data-filter="cat" data-value="all" onclick="filterBy('cat','all',this)">全部</button>
    <button class="btn" data-filter="cat" data-value="思想家" onclick="filterBy('cat','思想家',this)">思想家</button>
    <button class="btn" data-filter="cat" data-value="文学家" onclick="filterBy('cat','文学家',this)">文学家</button>
    <button class="btn" data-filter="cat" data-value="政治家" onclick="filterBy('cat','政治家',this)">政治家</button>
    <button class="btn" data-filter="cat" data-value="军事家" onclick="filterBy('cat','军事家',this)">军事家</button>
    <button class="btn" data-filter="cat" data-value="帝王" onclick="filterBy('cat','帝王',this)">帝王</button>
    <button class="btn" data-filter="cat" data-value="科学家" onclick="filterBy('cat','科学家',this)">科学家</button>
    <button class="btn" data-filter="cat" data-value="医学家" onclick="filterBy('cat','医学家',this)">医学家</button>
    <button class="btn" data-filter="cat" data-value="探险家" onclick="filterBy('cat','探险家',this)">探险家</button>
  </div>
</div>

<div class="stats-bar">
  <div class="stat-item"><div class="stat-num" id="stat-total">60</div><div class="stat-label">总人数</div></div>
  <div class="stat-item"><div class="stat-num" id="stat-provinces">19</div><div class="stat-label">涉及省份</div></div>
  <div class="stat-item"><div class="stat-num" id="stat-era">7</div><div class="stat-label">涉及朝代</div></div>
</div>

<div id="chart"></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 currentFilter = { era: 'all', cat: 'all' };
let chart;

// 初始化
function init(){
  chart = echarts.init(document.getElementById('chart'));
  render();
}

// 筛选函数
function filterBy(type, value, btn){
  // 更新按钮状态
  document.querySelectorAll(`[data-filter="${type}"]`).forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  
  // 更新筛选条件
  currentFilter[type] = value;
  render();
}

// 获取筛选后的数据
function getFilteredData(){
  let figs = allFigures;
  
  // 按朝代筛选
  if(currentFilter.era !== 'all'){
    figs = figs.filter(f => f.era === currentFilter.era);
  }
  
  // 按类型筛选
  if(currentFilter.cat !== 'all'){
    figs = figs.filter(f => f.cat === currentFilter.cat);
  }
  
  // 统计省份人数
  const cnt = {}, names = {};
  figs.forEach(f => {
    cnt[f.province] = (cnt[f.province] || 0) + 1;
    if(!names[f.province]) names[f.province] = [];
    names[f.province].push(f.name);
  });
  
  const mapData = Object.entries(cnt).map(([n,v]) => ({name: n, value: v, figures: names[n]}));
  const scatterData = figs.map(f => ({
    name: f.name,
    value: [...f.coords, 1],
    era: f.era,
    cat: f.cat,
    desc: f.desc
  }));
  
  return { figs, mapData, scatterData, max: Math.max(...Object.values(cnt), 1) };
}

// 渲染图表
function render(){
  const { figs, mapData, scatterData, max } = getFilteredData();
  
  // 更新统计
  const provinces = new Set(figs.map(f => f.province));
  const eras = new Set(figs.map(f => f.era));
  document.getElementById('stat-total').textContent = figs.length;
  document.getElementById('stat-provinces').textContent = provinces.size;
  document.getElementById('stat-era').textContent = eras.size;
  
  chart.setOption({
    backgroundColor: '#0a0e1a',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(10,14,30,0.95)',
      borderColor: '#334466',
      textStyle: { color: '#e0e6f0', fontSize: 13 },
      formatter: function(p){
        if(p.seriesType === 'map'){
          const figs = p.data && p.data.figures ? p.data.figures : [];
          return `<b style="color:#f0c060">📍 ${p.name}</b><br/>
人数: <b style="color:#f0c060">${p.value || 0}</b> 位<br/>
${figs.length ? '<span style="color:#aabbdd">' + figs.slice(0,6).join('、') + (figs.length > 6 ? '…' : '') + '</span>' : ''}`;
        }
        return `<b style="color:#f0c060">👤 ${p.name}</b><br/>
${p.data.era} · ${p.data.cat}<br/>
<span style="color:#8899bb">${p.data.desc}</span>`;
      }
    },
    visualMap: {
      min: 0, max: max,
      left: 12, bottom: 30,
      text: ['多', '少'],
      textStyle: { color: '#8899bb', fontSize: 11 },
      inRange: { color: ['#0d1a3a', '#1a3a6a', '#2a5a9a', '#e08020', '#f0c060'] },
      calculable: true, orient: 'vertical'
    },
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.2,
      center: [105, 36],
      label: { show: false },
      itemStyle: {
        normal: { areaColor: '#0d1530', borderColor: '#1a3060', borderWidth: 1 },
        emphasis: { areaColor: '#1a3a6a' }
      }
    },
    series: [
      { name: '分布', type: 'map', map: 'china', geoIndex: 0, data: mapData, tooltip: { show: true } },
      { name: '人物', type: 'effectScatter', coordinateSystem: 'geo', data: scatterData, symbolSize: 7,
        showEffectOn: 'render', rippleEffect: { brushType: 'stroke', scale: 3, period: 3 },
        itemStyle: { normal: { color: '#f0c060', shadowBlur: 10, shadowColor: 'rgba(240,192,96,0.6)' } } }
    ]
  }, true);
}

init();
window.onresize = () => chart && chart.resize();
</script>
</body>
</html>

哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - ®Geovin Du Dream Park™