纯HTML无法实现真正的数据大屏地图，因其缺乏地理坐标渲染与矢量图层控制能力；可行方案为使用ECharts map类型或Leaflet/Mapbox GL JS加载自定义行政区划图层。
直接用 HTML 做不了真正的“数据大屏地图”——它没有地理坐标渲染能力，也没有矢量图层控制逻辑。所谓“HTML 大屏地图”，本质是 SVG 或 Canvas + JavaScript 渲染的静态/半动态区域图，或嵌入第三方地图 SDK（如 ECharts、Mapbox、高德 JS API）的容器页。
为什么不能只靠纯 HTML 实现区域高亮和数据绑定
HTML 本身不理解“省份”“经纬度”“GeoJSON 边界”。<div> 没法自动对齐广东轮廓，<img> 无法响应点击并返回地市名称。常见错误是把一张中国地图 PNG 直接贴上去，再用绝对定位盖 div 标数字——这种方案在屏幕缩放、多分辨率大屏上会严重错位，且无法做 hover 交互、数据联动、动画过渡。
可行路径只有两条：
- 用
ECharts的geo或map类型图表（推荐，开箱即用，支持 GeoJSON、缩放、tooltip、视觉映射） - 用
Leaflet/Mapbox GL JS加载自定义行政区划图层（适合需底图、缩放、点标记等复杂场景）
ECharts 地图区域展示最简可用配置
这是国内数据大屏最常用、兼容性最好、学习成本最低的方案。核心是加载中国地图 JSON，并用 series.map 绑定数据。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须先注册地图：
echarts.registerMap('china', chinaJson)，chinaJson是标准 GeoJSON（推荐从 echarts-china-maps 下载） -
series[0].type设为'map'，series[0].map设为'china' - 数据格式必须是数组，每项含
name（省名，须与 GeoJSON 中properties.name严格一致）和value（数值） - 颜色映射靠
visualMap控制，别漏掉show: true，否则所有区域都是默认色
示例片段（省略 DOM 和 init）：
const option = {
visualMap: {
show: true,
min: 0,
max: 100,
text: ['高', '低'],
calculable: true,
inRange: { color: ['#e0ffff', '#006edd'] }
},
series: [{
type: 'map',
map: 'china',
label: { show: true },
data: [
{ name: '广东省', value: 82 },
{ name: '江苏省', value: 76 }
]
}]
};
区域名称匹配不上？90% 是编码/空格/简称问题
地图高亮失败，八成不是代码错，而是 name 字符串和 GeoJSON 内部名称对不上。比如：
- 你写
'广东'，但 GeoJSON 里是'广东省' - 复制粘贴时带了中文全角空格或换行符
- 用了旧版 ECharts 自带地图（
echarts.map.js），其名称是简写（如'京'代表北京），而新版 GeoJSON 用全称 - GeoJSON 来源混用：从不同网站下载的 JSON，对“内蒙古自治区”“宁夏回族自治区”的命名可能不一致
调试方法：打印 chinaJson.features.map(f => f.properties.name)，眼见为实。
大屏适配必须处理的三件事
投到 4K 分辨率电视或拼接屏时，ECharts 默认尺寸会糊、字小、比例失真：
- 初始化时传
devicePixelRatio: window.devicePixelRatio || 1，否则高清屏下文字发虚 - 用
resize()监听窗口变化，但大屏往往不触发resize（比如全屏切换），建议加定时轮询或监听screen.orientation - 字体大小别写死
12px，改用rem或按屏幕宽度计算：Math.max(12, window.innerWidth / 100)
另外，tooltip 在触控大屏上要加 triggerOn: 'click'，避免 hover 不生效。
真正卡住人的从来不是“怎么画出地图”，而是“怎么让地图在各种尺寸、DPR、缩放模式下稳定显示数据，且名字一个不错、颜色一处不偏”。GeoJSON 名称校验、devicePixelRatio 初始化、resize 的健壮监听——这三处不细调，大屏上线当天就返工。
