此程序的主要目的是创建一个中国城市旅游足迹地图,这是一个简洁直观的城市访问记录工具。用户能够通过该工具探索中国城市,并记录自己的旅行足迹。具体功能包括:
地图展示:呈现中国省级行政区划地图,地图颜色反映各省份的访问完成度。
统计信息显示:展示已访问的省份和城市数量。
省份详情查看:用户点击地图上的省份,可查看该省份的城市列表,了解已访问和未访问的城市情况,同时显示该省份的访问完成度。
HTML 部分
结构布局:运用 HTML5 语义化标签(如 <header>、<main>、<footer>)构建页面结构,使代码更具可读性与可维护性。
元素组织:借助 <div> 元素对页面内容进行分组,像 .container 用于包裹整个页面内容,.main-content 用于包含地图和信息面板等。
CSS 部分
样式设计:采用 CSS 实现页面的样式设计,包含背景颜色、字体样式、边框、阴影等。
布局方式:运用 Flexbox 和 Grid 布局技术,实现页面元素的灵活布局,确保页面在不同屏幕尺寸下都能自适应显示。
动画效果:使用 CSS 动画(如 @keyframes)为加载图标添加旋转动画,增强用户体验。
JavaScript 部分
数据存储:利用 JavaScript 对象存储中国各省份和城市的旅游数据,方便数据的管理与操作。
DOM 操作:通过 JavaScript 操作 DOM 元素,动态更新页面内容,例如点击省份后更新城市列表、访问统计信息和进度条等。
第三方库使用:引入 ECharts 库(从 <script src="echarts.min.js"></script> 可知),用于绘制中国省级行政区划地图,提升地图绘制的效率和质量。
效果如下(可设置是否默认显示某个省的信息):
代码如下:
可以直接保存后在本地打开。
需要注意:
地图的JS引用的是本地(<script src="echarts.min.js"></script>),使用在线的话可以复制下方内容。如果访问速度慢,可以使用下载到本地使用。
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
2. 全国省市数据见链接:https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json 也可以下载在本地使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国城市旅游足迹地图</title> <script src="echarts.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans SC', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } body { background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%); color: #334155; min-height: 100vh; padding: 20px; position: relative; overflow-x: hidden; } .container { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; min-height: 95vh; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05); } header { text-align: center; padding: 12px 20px; background: linear-gradient(120deg, #5b6cc4, #3a7bd5); color: white; position: relative; overflow: hidden; } header::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); transform: rotate(30deg); z-index: 0; } h1 { font-size: 2.6rem; margin-bottom: 12px; color: white; font-weight: 700; letter-spacing: -0.5px; position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .subtitle { font-size: 1.15rem; max-width: 800px; margin: 0 auto; color: rgba(255, 255, 255, 0.9); line-height: 1.6; font-weight: 300; position: relative; z-index: 1; } .main-content { display: flex; flex: 1; padding: 25px; gap: 25px; background: #fafbfc; } @media (max-width: 900px) { .main-content { flex-direction: column; } } .map-container { flex: 1; background: white; border-radius: 14px; padding: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; border: none; transition: all 0.3s ease; } .map-container:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); } .map-title { text-align: center; margin-bottom: 18px; color: #3a7bd5; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; } #china-map { width: 100%; flex: 1; min-height: 500px; border-radius: 10px; overflow: hidden; background: #f8fafc; border: 1px solid #e2e8f0; } .map-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #5b6cc4; font-size: 1.1rem; text-align: center; background: rgba(255, 255, 255, 0.95); padding: 20px 30px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 10; backdrop-filter: blur(4px); } .map-loading .spinner { margin-bottom: 15px; font-size: 2.2rem; animation: spin 1.5s linear infinite; color: #5b6cc4; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .info-panel { width: 340px; background: white; border-radius: 14px; padding: 25px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; border: none; transition: all 0.3s ease; } .info-panel:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); } @media (max-width: 900px) { .info-panel { width: 100%; } } .panel-title { color: #5b6cc4; font-size: 1.3rem; margin-bottom: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; } .selected-province { background: #f0f5ff; border-radius: 12px; padding: 20px; margin-bottom: 22px; border-left: 4px solid #5b6cc4; transition: all 0.3s ease; } .province-name { font-size: 1.4rem; font-weight: 700; color: #334155; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .visit-count { display: flex; align-items: center; margin-bottom: 15px; background: linear-gradient(120deg, #e0e7ff, #dbeafe); padding: 10px 18px; border-radius: 12px; width: fit-content; font-weight: 500; } .count-label { margin-right: 8px; color: #4f46e5; } .count-value { font-weight: 700; font-size: 1.3rem; color: #4f46e5; } .legend { display: flex; flex-direction: column; padding: 15px 0; margin: 15px 0; } .legend-title { margin-bottom: 10px; font-size: 0.95rem; color: #64748b; font-weight: 500; } .legend-content { display: flex; flex-direction: column; } .legend-colors { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); } .legend-color { flex: 1; } .legend-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: #64748b; } .cities-container { flex: 1; overflow-y: auto; background: #f8fafc; border-radius: 12px; padding: 15px; border: 1px solid #e2e8f0; } .cities-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .city-item { padding: 12px; border-radius: 10px; font-size: 0.92rem; text-align: center; transition: all 0.3s ease; border: 1px solid #e2e8f0; background: white; cursor: pointer; position: relative; overflow: hidden; } .city-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(91, 108, 196, 0.1), rgba(58, 123, 213, 0.1)); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .city-item:hover::after { opacity: 1; } .city-item:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(91, 108, 196, 0.15); } .city-item.visited { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; font-weight: 500; position: relative; z-index: 1; } .city-item.visited::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 20px solid #4f46e5; border-left: 20px solid transparent; } .city-item.visited::after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 1px; right: 2px; color: white; font-size: 8px; z-index: 2; } .city-item.not-visited { background: #f8fafc; color: #94a3b8; position: relative; z-index: 1; } footer { text-align: center; padding: 22px; background: #f1f5f9; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 0.9rem; } .stats { display: flex; justify-content: space-between; background: linear-gradient(120deg, #eef2ff, #e0e7ff); padding: 20px; border-radius: 14px; margin-bottom: 22px; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .stat-item { text-align: center; flex: 1; } .stat-value { font-size: 2.1rem; font-weight: 700; color: #4f46e5; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(79, 70, 229, 0.1); } .stat-label { font-size: 0.9rem; color: #4f46e5; font-weight: 500; opacity: 0.8; } .empty-list { text-align: center; padding: 40px 20px; color: #94a3b8; font-style: italic; background: transparent; border-radius: 8px; } .city-highlight { display: inline-block; background: linear-gradient(120deg, #5b6cc4, #4f46e5); color: white; padding: 2px 12px; border-radius: 20px; font-size: 0.85rem; margin-left: 8px; vertical-align: middle; } .progress-container { width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-top: 8px; } .progress-bar { height: 100%; background: linear-gradient(90deg, #a5b4fc, #818cf8); border-radius: 3px; width: 0%; transition: width 1s ease; } .province-progress { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #64748b; margin-top: 5px; } .percentage { font-weight: 600; color: #4f46e5; } .instructions { background: #f0f5ff; border-radius: 12px; padding: 15px; margin-top: 15px; border-left: 4px solid #4f46e5; font-size: 0.9rem; } .instructions h3 { color: #4f46e5; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .instructions ul { padding-left: 20px; color: #64748b; } .instructions li { margin-bottom: 6px; line-height: 1.5; } .instructions .highlight { background: rgba(79, 70, 229, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 500; } </style> </head> <body> <div> <header> <h1><i class="fas fa-map-marked-alt"></i> 中国城市旅游足迹地图</h1> <p>探索中国城市,记录旅行足迹 - 简洁直观的城市访问记录工具</p> </header> <div> <div> <div> <i class="fas fa-map"></i> 中国省级行政区划 </div> <div id="china-map"> <div> <div><i class="fas fa-spinner"></i></div> <div>正在加载地图数据...</div> </div> </div> </div> <div> <h2> <i class="fas fa-map-marker-alt"></i> 城市访问记录 </h2> <div> <div> <div id="visited-provinces">16</div> <div>已访问省份</div> </div> <div> <div id="visited-cities">61</div> <div>已访问城市</div> </div> </div> <div> <div>访问密度:</div> <div> <div> <div style="background: #e0f2fe;"></div> <div style="background: #bae6fd;"></div> <div style="background: #7dd3fc;"></div> <div style="background: #38bdf8;"></div> <div style="background: #0ea5e9;"></div> <div style="background: #0284c7;"></div> <div style="background: #0369a1;"></div> </div> <div> <span>0%</span> <span>25%</span> <span>50%</span> <span>75%</span> <span>100%</span> </div> </div> </div> <div> <div> <i class="fas fa-map-pin"></i> <span id="selected-province-name">请点击地图上的省份</span> </div> <div> <span>已访问城市:</span> <span id="visit-count">0</span> </div> <div> <span>完成度:</span> <span id="visit-percentage">0%</span> </div> <div> <div id="progress-bar"></div> </div> </div> <div> <div id="cities-list"> <div>点击地图上的省份查看城市列表</div> </div> </div> <div> <h3><i class="fas fa-info-circle"></i> 使用说明</h3> <ul> <li>点击地图上的<span>省份</span>查看该省城市列表</li> <li>地图颜色表示省份访问完成度</li> <li>已访问城市显示<span>蓝色标记</span></li> </ul> </div> </div> </div> <footer> <p>© 2025 中国城市旅游足迹地图 | 直接保存HTML,修改城市的visited属性即可。</p> </footer> </div> <script> // 完整中国省份城市数据(包含所有34个省级行政区) const travelData = { // 直辖市 "北京市": { name: "北京", cities: [ { name: "北京市", visited: false } ] }, "上海市": { name: "上海", cities: [ { name: "上海市", visited: true } ] }, "天津市": { name: "天津", cities: [ { name: "天津市", visited: true } ] }, "重庆市": { name: "重庆", cities: [ { name: "重庆市", visited: true } ] }, // 省份 "河北省": { name: "河北", cities: [ { name: "石家庄市", visited: false }, { name: "唐山市", visited: false }, { name: "秦皇岛市", visited: false }, { name: "邯郸市", visited: false }, { name: "邢台市", visited: false }, { name: "保定市", visited: false }, { name: "张家口市", visited: false }, { name: "承德市", visited: false }, { name: "沧州市", visited: false }, { name: "廊坊市", visited: false }, { name: "衡水市", visited: false } ] }, "山西省": { name: "山西", cities: [ { name: "太原市", visited: false }, { name: "大同市", visited: false }, { name: "阳泉市", visited: false }, { name: "长治市", visited: false }, { name: "晋城市", visited: false }, { name: "朔州市", visited: false }, { name: "晋中市", visited: false }, { name: "运城市", visited: false }, { name: "忻州市", visited: false }, { name: "临汾市", visited: false }, { name: "吕梁市", visited: false } ] }, "内蒙古自治区": { name: "内蒙古", cities: [ { name: "呼和浩特市", visited: false }, { name: "包头市", visited: false }, { name: "乌海市", visited: false }, { name: "赤峰市", visited: false }, { name: "通辽市", visited: false }, { name: "鄂尔多斯市", visited: false }, { name: "呼伦贝尔市", visited: false }, { name: "巴彦淖尔市", visited: false }, { name: "乌兰察布市", visited: false } ] }, "辽宁省": { name: "辽宁", cities: [ { name: "沈阳市", visited: false }, { name: "大连市", visited: false }, { name: "鞍山市", visited: false }, { name: "抚顺市", visited: false }, { name: "本溪市", visited: false }, { name: "丹东市", visited: false }, { name: "锦州市", visited: false }, { name: "营口市", visited: false }, { name: "阜新市", visited: false }, { name: "辽阳市", visited: false }, { name: "盘锦市", visited: false }, { name: "铁岭市", visited: false }, { name: "朝阳市", visited: false }, { name: "葫芦岛市", visited: false } ] }, "吉林省": { name: "吉林", cities: [ { name: "长春市", visited: false }, { name: "吉林市", visited: false }, { name: "四平市", visited: false }, { name: "辽源市", visited: false }, { name: "通化市", visited: false }, { name: "白山市", visited: false }, { name: "松原市", visited: false }, { name: "白城市", visited: false } ] }, "黑龙江省": { name: "黑龙江", cities: [ { name: "哈尔滨市", visited: false }, { name: "齐齐哈尔市", visited: false }, { name: "鸡西市", visited: false }, { name: "鹤岗市", visited: false }, { name: "双鸭山市", visited: false }, { name: "大庆市", visited: false }, { name: "伊春市", visited: false }, { name: "佳木斯市", visited: false }, { name: "七台河市", visited: false }, { name: "牡丹江市", visited: false }, { name: "黑河市", visited: false }, { name: "绥化市", visited: false } ] }, "江苏省": { name: "江苏", cities: [ { name: "南京市", visited: true }, { name: "无锡市", visited: true }, { name: "徐州市", visited: true }, { name: "常州市", visited: true }, { name: "苏州市", visited: true }, { name: "南通市", visited: false }, { name: "连云港市", visited: false }, { name: "淮安市", visited: true }, { name: "盐城市", visited: false }, { name: "扬州市", visited: true }, { name: "镇江市", visited: true }, { name: "泰州市", visited: false }, { name: "宿迁市", visited: true } ] }, "浙江省": { name: "浙江", cities: [ { name: "杭州市", visited: true }, { name: "宁波市", visited: false }, { name: "温州市", visited: false }, { name: "嘉兴市", visited: false }, { name: "湖州市", visited: true }, { name: "绍兴市", visited: false }, { name: "金华市", visited: false }, { name: "衢州市", visited: false }, { name: "舟山市", visited: false }, { name: "台州市", visited: false }, { name: "丽水市", visited: false } ] }, "安徽省": { name: "安徽", cities: [ { name: "合肥市", visited: false }, { name: "芜湖市", visited: false }, { name: "蚌埠市", visited: false }, { name: "淮南市", visited: false }, { name: "马鞍山市", visited: false }, { name: "淮北市", visited: false }, { name: "铜陵市", visited: false }, { name: "安庆市", visited: false }, { name: "黄山市", visited: true }, { name: "滁州市", visited: false }, { name: "阜阳市", visited: false }, { name: "宿州市", visited: false }, { name: "六安市", visited: false }, { name: "亳州市", visited: false }, { name: "池州市", visited: false }, { name: "宣城市", visited: true } ] }, "福建省": { name: "福建", cities: [ { name: "福州市", visited: false }, { name: "厦门市", visited: false }, { name: "莆田市", visited: false }, { name: "三明市", visited: false }, { name: "泉州市", visited: false }, { name: "漳州市", visited: false }, { name: "南平市", visited: false }, { name: "龙岩市", visited: false }, { name: "宁德市", visited: false } ] }, "江西省": { name: "江西", cities: [ { name: "南昌市", visited: false }, { name: "景德镇市", visited: false }, { name: "萍乡市", visited: false }, { name: "九江市", visited: false }, { name: "新余市", visited: false }, { name: "鹰潭市", visited: false }, { name: "赣州市", visited: false }, { name: "吉安市", visited: false }, { name: "宜春市", visited: false }, { name: "抚州市", visited: false }, { name: "上饶市", visited: false } ] }, "山东省": { name: "山东", cities: [ { name: "济南市", visited: false }, { name: "青岛市", visited: false }, { name: "淄博市", visited: false }, { name: "枣庄市", visited: false }, { name: "东营市", visited: false }, { name: "烟台市", visited: false }, { name: "潍坊市", visited: false }, { name: "济宁市", visited: true }, { name: "泰安市", visited: false }, { name: "威海市", visited: false }, { name: "日照市", visited: false }, { name: "临沂市", visited: false }, { name: "德州市", visited: false }, { name: "聊城市", visited: false }, { name: "滨州市", visited: false }, { name: "菏泽市", visited: true } ] }, "河南省": { name: "河南", cities: [ { name: "郑州市", visited: false }, { name: "开封市", visited: false }, { name: "洛阳市", visited: true }, { name: "平顶山市", visited: false }, { name: "安阳市", visited: false }, { name: "鹤壁市", visited: false }, { name: "新乡市", visited: false }, { name: "焦作市", visited: false }, { name: "濮阳市", visited: false }, { name: "许昌市", visited: false }, { name: "漯河市", visited: false }, { name: "三门峡市", visited: false }, { name: "南阳市", visited: false }, { name: "商丘市", visited: false }, { name: "信阳市", visited: false }, { name: "周口市", visited: false }, { name: "驻马店市", visited: false } ] }, "湖北省": { name: "湖北", cities: [ { name: "武汉市", visited: false }, { name: "黄石市", visited: false }, { name: "十堰市", visited: false }, { name: "宜昌市", visited: false }, { name: "襄阳市", visited: false }, { name: "鄂州市", visited: false }, { name: "荆门市", visited: false }, { name: "孝感市", visited: false }, { name: "荆州市", visited: false }, { name: "黄冈市", visited: false }, { name: "咸宁市", visited: false }, { name: "随州市", visited: false }, { name: "恩施土家族苗族自治州", visited: false }, { name: "仙桃市", visited: false }, { name: "潜江市", visited: false }, { name: "天门市", visited: false }, { name: "神农架林区", visited: false } ] }, "湖南省": { name: "湖南", cities: [ { name: "长沙市", visited: false }, { name: "株洲市", visited: false }, { name: "湘潭市", visited: false }, { name: "衡阳市", visited: false }, { name: "邵阳市", visited: false }, { name: "岳阳市", visited: false }, { name: "常德市", visited: false }, { name: "张家界市", visited: false }, { name: "益阳市", visited: false }, { name: "郴州市", visited: false }, { name: "永州市", visited: false }, { name: "怀化市", visited: false }, { name: "娄底市", visited: false }, { name: "湘西土家族苗族自治州", visited: false } ] }, "广东省": { name: "广东", cities: [ { name: "广州市", visited: false }, { name: "韶关市", visited: false }, { name: "深圳市", visited: false }, { name: "珠海市", visited: false }, { name: "汕头市", visited: false }, { name: "佛山市", visited: false }, { name: "江门市", visited: false }, { name: "湛江市", visited: false }, { name: "茂名市", visited: false }, { name: "肇庆市", visited: false }, { name: "惠州市", visited: false }, { name: "梅州市", visited: false }, { name: "汕尾市", visited: false }, { name: "河源市", visited: false }, { name: "阳江市", visited: false }, { name: "清远市", visited: false }, { name: "东莞市", visited: false }, { name: "中山市", visited: false }, { name: "潮州市", visited: false }, { name: "揭阳市", visited: false }, { name: "云浮市", visited: false } ] }, "广西壮族自治区": { name: "广西", cities: [ { name: "南宁市", visited: false }, { name: "柳州市", visited: false }, { name: "桂林市", visited: false }, { name: "梧州市", visited: false }, { name: "北海市", visited: false }, { name: "防城港市", visited: false }, { name: "钦州市", visited: false }, { name: "贵港市", visited: false }, { name: "玉林市", visited: false }, { name: "百色市", visited: false }, { name: "贺州市", visited: false }, { name: "河池市", visited: false }, { name: "来宾市", visited: false }, { name: "崇左市", visited: false } ] }, "海南省": { name: "海南", cities: [ { name: "海口市", visited: false }, { name: "三亚市", visited: false }, { name: "三沙市", visited: false }, { name: "儋州市", visited: false }, { name: "五指山市", visited: false }, { name: "琼海市", visited: false }, { name: "文昌市", visited: false }, { name: "万宁市", visited: false }, { name: "东方市", visited: false }, { name: "定安县", visited: false }, { name: "屯昌县", visited: false }, { name: "澄迈县", visited: false }, { name: "临高县", visited: false }, { name: "白沙黎族自治县", visited: false }, { name: "昌江黎族自治县", visited: false }, { name: "乐东黎族自治县", visited: false }, { name: "陵水黎族自治县", visited: false }, { name: "保亭黎族苗族自治县", visited: false }, { name: "琼中黎族苗族自治县", visited: false } ] }, "四川省": { name: "四川", cities: [ { name: "成都市", visited: true }, { name: "自贡市", visited: false }, { name: "攀枝花市", visited: false }, { name: "泸州市", visited: false }, { name: "德阳市", visited: false }, { name: "绵阳市", visited: false }, { name: "广元市", visited: false }, { name: "遂宁市", visited: false }, { name: "内江市", visited: false }, { name: "乐山市", visited: false }, { name: "南充市", visited: false }, { name: "眉山市", visited: false }, { name: "宜宾市", visited: false }, { name: "广安市", visited: false }, { name: "达州市", visited: false }, { name: "雅安市", visited: false }, { name: "巴中市", visited: false }, { name: "资阳市", visited: false }, { name: "阿坝藏族羌族自治州", visited: false }, { name: "甘孜藏族自治州", visited: false }, { name: "凉山彝族自治州", visited: false } ] }, "贵州省": { name: "贵州", cities: [ { name: "贵阳市", visited: true }, { name: "六盘水市", visited: false }, { name: "遵义市", visited: false }, { name: "安顺市", visited: false }, { name: "毕节市", visited: true }, { name: "铜仁市", visited: false }, { name: "黔西南布依族苗族自治州", visited: false }, { name: "黔东南苗族侗族自治州", visited: false }, { name: "黔南布依族苗族自治州", visited: false } ] }, "云南省": { name: "云南", cities: [ { name: "昆明市", visited: true }, { name: "曲靖市", visited: false }, { name: "玉溪市", visited: false }, { name: "保山市", visited: false }, { name: "昭通市", visited: false }, { name: "丽江市", visited: true }, { name: "普洱市", visited: false }, { name: "临沧市", visited: false }, { name: "楚雄彝族自治州", visited: false }, { name: "红河哈尼族彝族自治州", visited: false }, { name: "文山壮族苗族自治州", visited: false }, { name: "西双版纳傣族自治州", visited: true }, { name: "大理白族自治州", visited: true }, { name: "德宏傣族景颇族自治州", visited: false }, { name: "怒江傈僳族自治州", visited: false }, { name: "迪庆藏族自治州", visited: true } ] }, "西藏自治区": { name: "西藏", cities: [ { name: "拉萨市", visited: false }, { name: "日喀则市", visited: false }, { name: "昌都市", visited: false }, { name: "林芝市", visited: false }, { name: "山南市", visited: false }, { name: "那曲市", visited: false }, { name: "阿里地区", visited: false } ] }, "陕西省": { name: "陕西", cities: [ { name: "西安市", visited: false }, { name: "铜川市", visited: false }, { name: "宝鸡市", visited: false }, { name: "咸阳市", visited: false }, { name: "渭南市", visited: false }, { name: "延安市", visited: false }, { name: "汉中市", visited: false }, { name: "榆林市", visited: false }, { name: "安康市", visited: false }, { name: "商洛市", visited: false } ] }, "甘肃省": { name: "甘肃", cities: [ { name: "兰州市", visited: false }, { name: "嘉峪关市", visited: false }, { name: "金昌市", visited: false }, { name: "白银市", visited: false }, { name: "天水市", visited: false }, { name: "武威市", visited: false }, { name: "张掖市", visited: false }, { name: "平凉市", visited: false }, { name: "酒泉市", visited: false }, { name: "庆阳市", visited: false }, { name: "定西市", visited: false }, { name: "陇南市", visited: false }, { name: "临夏回族自治州", visited: false }, { name: "甘南藏族自治州", visited: false } ] }, "青海省": { name: "青海", cities: [ { name: "西宁市", visited: false }, { name: "海东市", visited: false }, { name: "海北藏族自治州", visited: false }, { name: "黄南藏族自治州", visited: false }, { name: "海南藏族自治州", visited: false }, { name: "果洛藏族自治州", visited: false }, { name: "玉树藏族自治州", visited: false }, { name: "海西蒙古族藏族自治州", visited: false } ] }, "宁夏回族自治区": { name: "宁夏", cities: [ { name: "银川市", visited: false }, { name: "石嘴山市", visited: false }, { name: "吴忠市", visited: false }, { name: "固原市", visited: false }, { name: "中卫市", visited: false } ] }, "新疆维吾尔自治区": { name: "新疆", cities: [ { name: "乌鲁木齐市", visited: false }, { name: "克拉玛依市", visited: false }, { name: "吐鲁番市", visited: false }, { name: "哈密市", visited: false }, { name: "昌吉回族自治州", visited: false }, { name: "博尔塔拉蒙古自治州", visited: false }, { name: "巴音郭楞蒙古自治州", visited: false }, { name: "阿克苏地区", visited: false }, { name: "克孜勒苏柯尔克孜自治州", visited: false }, { name: "喀什地区", visited: false }, { name: "和田地区", visited: false }, { name: "伊犁哈萨克自治州", visited: false }, { name: "塔城地区", visited: false }, { name: "阿勒泰地区", visited: false } ] }, "台湾省": { name: "台湾", cities: [ { name: "台北市", visited: false }, { name: "高雄市", visited: false }, { name: "基隆市", visited: false }, { name: "台中市", visited: false }, { name: "台南市", visited: false }, { name: "新竹市", visited: false }, { name: "嘉义市", visited: false } ] }, "香港特别行政区": { name: "香港", cities: [ { name: "香港岛", visited: false }, { name: "九龙", visited: false }, { name: "新界", visited: false } ] }, "澳门特别行政区": { name: "澳门", cities: [ { name: "澳门半岛", visited: false }, { name: "氹仔岛", visited: false }, { name: "路环岛", visited: false } ] } }; // 全局变量 let myChart; let currentProvince = "江苏省"; let visitedProvinces = 0; let visitedCities = 0; // 计算统计数据 function calculateStats() { visitedProvinces = 0; visitedCities = 0; for (const provinceName in travelData) { const provinceData = travelData[provinceName]; let hasVisitedCity = false; for (const city of provinceData.cities) { if (city.visited) { visitedCities++; hasVisitedCity = true; } } if (hasVisitedCity) { visitedProvinces++; } } // 更新统计数据 document.getElementById('visited-provinces').textContent = visitedProvinces; document.getElementById('visited-cities').textContent = visitedCities; } // 初始化地图 async function initMap() { const chartDom = document.getElementById('china-map'); myChart = echarts.init(chartDom); try { // 加载中国地图数据 const response = await fetch('100000_full.json'); const chinaMap = await response.json(); // 注册地图 echarts.registerMap('china', chinaMap); // 计算统计数据 calculateStats(); // 准备地图数据 const mapData = []; // 计算每个省份的访问比例 for (const provinceName in travelData) { const provinceData = travelData[provinceName]; const totalCities = provinceData.cities.length; const visitedCities = provinceData.cities.filter(city => city.visited).length; const visitRatio = visitedCities / totalCities; mapData.push({ name: provinceName, value: visitRatio * 100 // 转换为百分比 }); } // 设置地图选项 const option = { title: { text: '', left: 'center', textStyle: { color: '#3a7bd5', fontSize: 16, fontWeight: 'normal' }, top: 10 }, tooltip: { trigger: 'item', formatter: function(params) { const value = params.value || 0; return `<b>${params.name}</b><br/>访问比例: <b>${value.toFixed(1)}%</b>`; }, backgroundColor: 'rgba(255,255,255,0.95)', borderColor: '#e2e8f0', textStyle: { color: '#334155' }, extraCssText: 'box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius: 10px; padding: 12px;' }, visualMap: { min: 0, max: 100, calculable: true, inRange: { color: ['#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8', '#0ea5e9', '#0284c7', '#0369a1'] }, textStyle: { color: '#64748b' }, left: 'left', bottom: '5%' }, series: [ { name: '城市访问比例', type: 'map', map: 'china', roam: true, zoom: 1.6, // 调整缩放级别 center: [105, 35], // 设置中心点坐标,使中国大陆最大化显示 label: { show: true, fontSize: 10, color: '#334155' }, emphasis: { label: { color: '#3a7bd5', fontSize: 12, fontWeight: 'bold' }, itemStyle: { areaColor: '#fbbf24' } }, itemStyle: { borderColor: '#fff', borderWidth: 1 }, data: mapData } ] }; // 使用配置项显示图表 myChart.setOption(option); // 添加点击事件 myChart.on('click', function(params) { const provinceName = params.name; currentProvince = provinceName; showProvinceCities(provinceName); }); // 隐藏加载提示 document.querySelector('.map-loading').style.display = 'none'; // 响应窗口大小变化 window.addEventListener('resize', function() { myChart.resize(); }); // 初始显示江苏省 showProvinceCities(currentProvince); } catch (error) { console.error('地图加载失败:', error); document.querySelector('.map-loading').innerHTML = ` <div style="color: #ef4444; margin-bottom: 10px;"> <i class="fas fa-exclamation-triangle"></i> 地图加载失败 </div> <div>请检查网络连接后刷新页面</div> `; } } // 显示省份城市 function showProvinceCities(provinceName) { const provinceData = travelData[provinceName]; const citiesList = document.getElementById('cities-list'); if (!provinceData) { document.getElementById('selected-province-name').textContent = provinceName; document.getElementById('visit-count').textContent = "0"; document.getElementById('visit-percentage').textContent = "0%"; document.getElementById('progress-bar').style.width = "0%"; citiesList.innerHTML = '<div>您尚未访问过该省份</div>'; return; } // 更新省份信息 document.getElementById('selected-province-name').textContent = provinceData.name; // 计算已访问城市数量 const visitedCities = provinceData.cities.filter(city => city.visited).length; const totalCities = provinceData.cities.length; const visitPercentage = Math.round((visitedCities / totalCities) * 100); document.getElementById('visit-count').textContent = visitedCities; document.getElementById('visit-percentage').textContent = `${visitPercentage}%`; // 更新进度条 setTimeout(() => { document.getElementById('progress-bar').style.width = `${visitPercentage}%`; }, 100); // 生成城市列表 citiesList.innerHTML = ''; provinceData.cities.forEach((city, index) => { const cityItem = document.createElement('div'); cityItem.className = `city-item ${city.visited ? 'visited' : 'not-visited'}`; cityItem.textContent = city.name; cityItem.dataset.index = index; // 添加点击事件处理程序 cityItem.addEventListener('click', function(e) { e.stopPropagation(); toggleCityVisited(provinceName, parseInt(this.dataset.index)); }); citiesList.appendChild(cityItem); }); } // 更新地图数据 function updateMapData() { const mapData = []; // 计算每个省份的访问比例 for (const provinceName in travelData) { const provinceData = travelData[provinceName]; const totalCities = provinceData.cities.length; const visitedCities = provinceData.cities.filter(city => city.visited).length; const visitRatio = visitedCities / totalCities; mapData.push({ name: provinceName, value: visitRatio * 100 }); } // 更新地图选项 myChart.setOption({ series: [{ data: mapData }] }); } // 页面加载完成后初始化地图 document.addEventListener('DOMContentLoaded', initMap); // 添加初始省份展示(示例) setTimeout(() => { showProvinceCities("江苏省"); }, 1500); </script> </body> </html>