SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>同学录取分布地图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<style>#main{width:100vw;height:95vh;margin:0;}</style>
</head>
<body>
<div id="main"></div>
<script>
const studentList = [
  {name:"丁子豪",school:"大连海事大学",prov:"辽宁"},
  {name:"冯炳皓",school:"宁波大学",prov:"浙江"},
  {name:"蒋政凌",school:"中国医科大学",prov:"辽宁"},
  {name:"李浩阳",school:"浙江工业大学",prov:"浙江"},
  {name:"李宇浩",school:"江南大学",prov:"江苏"},
  {name:"李仁勇",school:"温州大学",prov:"浙江"},
  {name:"卢立新",school:"中北大学",prov:"山西"},
  {name:"卢志斌",school:"华侨大学",prov:"福建"},
  {name:"罗乙椋",school:"杭州电子科技大学",prov:"浙江"},
  {name:"聂红光",school:"浙江警察学院",prov:"浙江"},
  {name:"邱晨阳",school:"哈尔滨医科大学",prov:"黑龙江"},
  {name:"王宇轩",school:"浙江中医药大学",prov:"浙江"},
  {name:"丁子宸",school:"浙江中医药大学",prov:"浙江"},
  {name:"王志翔",school:"上海电力大学",prov:"上海"},
  {name:"叶骐源",school:"浙江工业大学",prov:"浙江"},
  {name:"张俊宇",school:"浙江工商大学",prov:"浙江"},
  {name:"朱昱霖",school:"杭州电子科技大学",prov:"浙江"},
  {name:"叶籽邑",school:"浙江工业大学",prov:"浙江"},
  {name:"贺宇懿",school:"上海电力大学",prov:"上海"},
  {name:"陈鸣玖",school:"中国计量大学",prov:"浙江"},
  {name:"金毅杰",school:"广西中医药大学",prov:"广西"},
  {name:"叶嘉俊",school:"合肥工业大学",prov:"安徽"},
  {name:"金予璠",school:"山西财经大学",prov:"山西"},
  {name:"杨子华",school:"北京化工大学",prov:"北京"},
  {name:"王艺璇",school:"温州医科大学",prov:"浙江"},
  {name:"任梦琪",school:"浙江工业大学",prov:"浙江"},
  {name:"黄婧婷",school:"哈尔滨工业大学威海校区",prov:"山东"},
  {name:"王诗涵",school:"大连理工大学盘锦校区",prov:"辽宁"},
  {name:"余兆曦",school:"湖南大学",prov:"湖南"},
  {name:"赵沛柔",school:"南方医科大学",prov:"广东"},
  {name:"陈慰波",school:"山东大学",prov:"山东"},
  {name:"师家乐",school:"大连理工大学",prov:"辽宁"},
  {name:"唐嘉韩",school:"新疆大学",prov:"新疆"},
  {name:"吴思嘉",school:"杭州电子科技大学",prov:"浙江"},
  {name:"何铭璨",school:"南京工业大学",prov:"江苏"},
  {name:"聂若晞",school:"天津工业大学",prov:"天津"},
  {name:"周若曦",school:"江南大学",prov:"江苏"},
  {name:"王星皓",school:"东南大学",prov:"江苏"},
  {name:"郭怿妍",school:"杭州电子科技大学",prov:"浙江"},
  {name:"郑舒心",school:"上海立信会计金融学院",prov:"上海"}
];

function groupByProvince(list) {
  const map = {};
  list.forEach(item => {
    if (!map[item.prov]) map[item.prov] = [];
    map[item.prov].push(item);
  });
  return map;
}
const provinceMap = groupByProvince(studentList);

const myChart = echarts.init(document.getElementById('main'));
const data = Object.keys(provinceMap).map(p => ({
  name: p,
  value: provinceMap[p].length
}));

const mapNameFix = {
  "新疆维吾尔自治区":"新疆",
  "内蒙古自治区":"内蒙古",
  "广西壮族自治区":"广西",
  "宁夏回族自治区":"宁夏",
  "西藏自治区":"西藏",
  "黑龙江省":"黑龙江",
  "吉林省":"吉林",
  "辽宁省":"辽宁"
};

const option = {
  title: {
    text: '同学录取分布地图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    confine: true,
    backgroundColor: 'rgba(0,0,0,0.75)',
    textStyle: {color:'#fff'},
    formatter:function(params){
      let pName = params.name;
      if(mapNameFix[pName]) pName = mapNameFix[pName];
      const arr = provinceMap[pName];
      if(!arr) return '';
      let html = `<div style="font-weight:bold;margin-bottom:6px">${pName}（${arr.length}人）</div>`;
      arr.forEach(stu=>{
        html += `<div>${stu.name} —— ${stu.school}</div>`;
      })
      return html;
    }
  },
  visualMap: {
    min: 0,
    max: 20,
    left: 'left',
    bottom: '5%',
    text: ['多','少'],
    calculable: true
  },
  series: [
    {
      name: '人数',
      type: 'map',
      mapType: 'china',
      roam: true,
      label: {
        show: true
      },
      data: data
    }
  ]
};
myChart.setOption(option);
window.addEventListener('resize',()=>myChart.resize());
</script>
</body>
</html>