2026 年 10 月 · 技术栈HTML5 ECharts 5.4.3目录TL;DR一、最终效果展示二、技术栈一览三、页面整体布局结构四、制作流程详解五、配色方案总结六、常见问题 FAQ七、总结与扩展方向TL;DR本文完整讲解如何用单文件 HTML ECharts 5 制作一个深色科技风的「中国各地区旅游人数可视化数字大屏」三栏栅格布局、真实中国省界地图按旅游人数区间分段着色、数字翻牌器、实时时钟、7 个图表模块零构建、双击浏览器即可运行。文末附制作中实际踩过的坑地图不显示的根因与修复。一、最终效果展示大屏整体为深色科技蓝主题顶部霓虹发光标题栏主体三栏布局左栏三个图表面板TOP10 柱状图、游客类型饼图、入境趋势折线图中栏数字翻牌器与中国地图右栏三个图表面板城市排行、收入来源、满意度仪表盘。图 1 大屏整体效果1920×1080地图支持按旅游人数区间分段着色不同人数区间的省份使用固定的离散颜色悬停可查看具体数值与所属区间支持缩放漫游。二、技术栈一览技术版本用途HTML5 / CSS3—页面结构、栅格布局、霓虹发光特效JavaScript (ES6)—数据驱动、动画、定时器ECharts5.4.3全部图表渲染柱 / 饼 / 线 / 地图 / 仪表盘中国地图 GeoJSONDataV aliyun 版真实省界地理数据无构建工具—单文件交付file:// 协议直接打开三、页面整体布局结构大屏采用经典的三栏式 Grid 布局左 3 : 中 6 : 右 3自上而下分为标题栏与主体区代码 1 大屏整体布局示意┌──────────────────────────────────────────────┐ │ 创作人 顶部霓虹标题栏 实时时钟 │ ├───────────┬──────────────────┬───────────────┤ │ 左栏 (3fr) │ 中栏 (6fr) │ 右栏 (3fr) │ │ TOP10柱状图│ 核心指标翻牌器×2 │ 城市排行 │ │ 游客类型饼图│ │ 收入来源饼图 │ │ 入境趋势折线│ 中国地图 │ 满意度仪表盘 │ └───────────┴──────────────────┴───────────────┘三栏用 CSS Grid 一行声明搞定中栏内部再分上下两行23% 翻牌器 75% 地图代码 2 三栏布局核心 CSS/* 主体三栏3fr : 6fr : 3fr */ main.grid{ flex:1; display:grid; grid-template-columns:3fr 6fr 3fr; /* 三栏宽度比 */ gap:12px; min-height:0; } .col{display:grid; gap:12px; min-height:0;} .col-left {grid-template-rows:1fr 1fr 1fr;} /* 左栏平分3行 */ .col-right {grid-template-rows:1fr 1fr 1fr;} /* 右栏平分3行 */ .col-center{grid-template-rows:23% 75%;} /* 中栏上翻牌器下地图 */四、制作流程详解整个制作流程分为 6 个 Step按「骨架 → 皮肤 → 地图 → 图表 → 动效 → 优化」的顺序推进每一步都给出可直接复制的代码与注释全部走完约 100 分钟。Step 1搭建页面骨架约 10 分钟先写 HTML 骨架一个 #app 容器纵向 flex 布局上部 header标题时钟下部 main 三栏每个图表模块是一个 .panel 面板内含标题和图表容器。代码 3 页面骨架 HTMLindex.html 节选!-- index.html页面骨架 -- div idapp !-- 顶部标题栏创作人 发光标题 实时时钟 -- header classtop div classtitle中国各地区旅游人数可视化数字大屏/div div classclock idclock--:--:--/div /header !-- 主体三栏 -- main classgrid !-- 左栏三个图表面板 -- div classcol col-left div classpanel div classp-title全国各省旅游人数 TOP10/div div idchart-bar classchart/div !-- 图表挂载点 -- /div div classpanel div classp-title游客类型构成占比/div div idchart-pie classchart/div /div div classpanel div classp-title近7日入境游客趋势/div div idchart-line classchart/div /div /div !-- 中栏翻牌器 地图结构对称略 -- div classcol col-center …… /div !-- 右栏城市排行 / 收入来源 / 满意度结构对称略 -- div classcol col-right …… /div /main /div要点每个 .chart 容器必须有确定的高度这里用 height:calc(100% - 34px) 扣除标题高度否则 ECharts 初始化时会因容器高度为 0 而不渲染——这是大屏开发最常见的第一个坑。Step 2深色科技风主题样式约 15 分钟视觉核心是「深蓝背景 霓虹青色发光」。用径向渐变做背景伪元素叠加网格纹理文字用多层 text-shadow 做霓虹发光代码 4 深色科技风核心样式/* 深色科技风核心样式 */ body{ /* 径向渐变顶部微亮 → 深海蓝 → 近黑 */ background:radial-gradient(ellipse at 50% 0%, #062a4a 0%, #020a18 55%, #010510 100%); color:#cfe9ff; font-family:Microsoft YaHei,PingFang SC,sans-serif; overflow:hidden; /* 大屏禁止滚动 */ } /* 网格纹理两组正交线性渐变每 48px 一格 */ body::before{ content:; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(0,242,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,242,255,.05) 1px, transparent 1px); background-size:48px 48px; } /* 标题霓虹发光三层青色阴影叠加 */ header.top .title{ font-size:30px; font-weight:700; letter-spacing:4px; text-shadow:0 0 6px #00f2ff, 0 0 18px #00f2ff, 0 0 42px #00bfff; }面板的「四角边框」用两个伪元素实现——.panel::before 画左上角.panel::after 画右上角代码 5 面板四角亮边 CSS/* 面板半透明底 发光边框 */ .panel{ position:relative; background:rgba(0,30,60,.35); border:1px solid rgba(0,242,255,.35); border-radius:8px; box-shadow:inset 0 0 30px rgba(0,98,255,.12); /* 内发光 */ } /* 左上角亮角 */ .panel::before{ content:; position:absolute; top:0; left:0; width:26px; height:26px; border-top:2px solid #00f2ff; border-left:2px solid #00f2ff; } /* 右上角亮角 */ .panel::after{ content:; position:absolute; top:0; right:0; width:26px; height:26px; border-top:2px solid #00f2ff; border-right:2px solid #00f2ff; }Step 3引入 ECharts 并注册中国地图约 15 分钟ECharts 从 CDN 引入并做双 CDN 兜底主 CDN 失败自动切备用提升加载可靠性代码 6 双 CDN 引入 ECharts!-- 主 CDN国内静态资源加速 -- script srchttps://cdn.staticfile.org/echarts/5.4.3/echarts.min.js/script script // 兜底主 CDN 未加载成功时回退 jsdelivr if(typeof echarts undefined){ document.write(script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js\/script); } /script中国地图需要 GeoJSON 地理数据。不要手写占位坐标血泪经验见 FAQ应从阿里云 DataV 地图选择器下载标准省界数据然后用 registerMap 注册代码 7 注册中国地图// 注册中国地图geoData 为下载的 GeoJSON 对象 // 数据来源https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json echarts.registerMap(china, geoData);注意GeoJSON 中省份名称为全称如「广东省」「广西壮族自治区」业务数据里的名称必须与之一一对应否则数值无法匹配到省份会显示为无数据的默认色。Step 4核心图表实现约 40 分钟本步骤完成 5 个核心图表柱状图、环形饼图、折线图、分段着色中国地图与仪表盘。每个图表均遵循「init 拿到实例 → setOption 注入配置」的两步模式。4.1 各省旅游人数 TOP10 柱状图横向条形用线性渐变填充 圆角代码 8 TOP10 横向柱状图配置// 左栏1TOP10 横向柱状图 const barChart echarts.init(document.getElementById(chart-bar)); barChart.setOption({ grid:{left:8,right:16,top:10,bottom:8,containLabel:true}, xAxis:{type:value, axisLabel:{color:#8fd6ff, fontSize:10}}, yAxis:{type:category, data:provinces.slice().reverse()}, // 倒序使最大值在顶部 series:[{ type:bar, data:tourists.slice().reverse(), barWidth:12, itemStyle:{ // 水平渐变左深右亮 color:new echarts.graphic.LinearGradient(1,0,0,0,[ {offset:0,color:#00bfff},{offset:1,color:#1e90ff} ]), borderRadius:[0,6,6,0] // 右端圆角 }, label:{show:true, position:right, color:#00f2ff, fontSize:10} }] });4.2 游客类型环形饼图内外双半径形成环形代码 9 环形饼图配置// 左栏2环形饼图 pieChart.setOption({ series:[{ type:pie, radius:[38%,68%], // 内外半径 → 环形 itemStyle:{borderColor:#020a18, borderWidth:2}, // 扇区间隙 data:[ {name:散客自由行, value:48, itemStyle:{color:#00f2ff}}, {name:团队游, value:22, itemStyle:{color:#1e90ff}}, {name:自驾游, value:15, itemStyle:{color:#3be1c4}}, {name:亲子游, value:9, itemStyle:{color:#7b6cff}}, {name:研学游, value:6, itemStyle:{color:#ff8c00}} ] }] });4.3 入境趋势平滑面积折线图smooth 平滑 渐变 areaStyle代码 10 平滑面积折线图配置// 左栏3平滑面积折线图 lineChart.setOption({ xAxis:{type:category, data:[周一,周二,周三,周四,周五,周六,周日]}, yAxis:{type:value}, series:[ {name:入境游客, type:line, smooth:true, data:[28,32,30,38,42,55,60], areaStyle:{ // 面积渐变顶部 35% 透明度 → 底部全透明 color:new echarts.graphic.LinearGradient(0,0,0,1,[ {offset:0,color:rgba(0,242,255,.35)}, {offset:1,color:rgba(0,242,255,0)} ]) }}, {name:出境游客, type:line, smooth:true, data:[22,25,24,30,33,40,45]} ] });4.4 中国地图 分段区间着色核心用 visualMap 的 piecewise分段式类型让每个旅游人数区间对应固定颜色比连续渐变更能突出「高 / 中 / 低」分区对比。先看提示框与分段着色配置代码 11 地图 tooltip 与分段 visualMapconst mapChart echarts.init(document.getElementById(chart-map)); mapChart.setOption({ tooltip:{ trigger:item, backgroundColor:rgba(0,20,50,.9), borderColor:#00f2ff, // 悬停显示省名 数值 所属区间 formatter:p{ const v p.value||0; const seg v450?≥450:v350?350-450: v250?250-350:v150?150-250:150 ECharts 打造「中国各地区旅游人数可视化数字大屏」完整制作教程
2026 年 10 月 · 技术栈HTML5 ECharts 5.4.3目录TL;DR一、最终效果展示二、技术栈一览三、页面整体布局结构四、制作流程详解五、配色方案总结六、常见问题 FAQ七、总结与扩展方向TL;DR本文完整讲解如何用单文件 HTML ECharts 5 制作一个深色科技风的「中国各地区旅游人数可视化数字大屏」三栏栅格布局、真实中国省界地图按旅游人数区间分段着色、数字翻牌器、实时时钟、7 个图表模块零构建、双击浏览器即可运行。文末附制作中实际踩过的坑地图不显示的根因与修复。一、最终效果展示大屏整体为深色科技蓝主题顶部霓虹发光标题栏主体三栏布局左栏三个图表面板TOP10 柱状图、游客类型饼图、入境趋势折线图中栏数字翻牌器与中国地图右栏三个图表面板城市排行、收入来源、满意度仪表盘。图 1 大屏整体效果1920×1080地图支持按旅游人数区间分段着色不同人数区间的省份使用固定的离散颜色悬停可查看具体数值与所属区间支持缩放漫游。二、技术栈一览技术版本用途HTML5 / CSS3—页面结构、栅格布局、霓虹发光特效JavaScript (ES6)—数据驱动、动画、定时器ECharts5.4.3全部图表渲染柱 / 饼 / 线 / 地图 / 仪表盘中国地图 GeoJSONDataV aliyun 版真实省界地理数据无构建工具—单文件交付file:// 协议直接打开三、页面整体布局结构大屏采用经典的三栏式 Grid 布局左 3 : 中 6 : 右 3自上而下分为标题栏与主体区代码 1 大屏整体布局示意┌──────────────────────────────────────────────┐ │ 创作人 顶部霓虹标题栏 实时时钟 │ ├───────────┬──────────────────┬───────────────┤ │ 左栏 (3fr) │ 中栏 (6fr) │ 右栏 (3fr) │ │ TOP10柱状图│ 核心指标翻牌器×2 │ 城市排行 │ │ 游客类型饼图│ │ 收入来源饼图 │ │ 入境趋势折线│ 中国地图 │ 满意度仪表盘 │ └───────────┴──────────────────┴───────────────┘三栏用 CSS Grid 一行声明搞定中栏内部再分上下两行23% 翻牌器 75% 地图代码 2 三栏布局核心 CSS/* 主体三栏3fr : 6fr : 3fr */ main.grid{ flex:1; display:grid; grid-template-columns:3fr 6fr 3fr; /* 三栏宽度比 */ gap:12px; min-height:0; } .col{display:grid; gap:12px; min-height:0;} .col-left {grid-template-rows:1fr 1fr 1fr;} /* 左栏平分3行 */ .col-right {grid-template-rows:1fr 1fr 1fr;} /* 右栏平分3行 */ .col-center{grid-template-rows:23% 75%;} /* 中栏上翻牌器下地图 */四、制作流程详解整个制作流程分为 6 个 Step按「骨架 → 皮肤 → 地图 → 图表 → 动效 → 优化」的顺序推进每一步都给出可直接复制的代码与注释全部走完约 100 分钟。Step 1搭建页面骨架约 10 分钟先写 HTML 骨架一个 #app 容器纵向 flex 布局上部 header标题时钟下部 main 三栏每个图表模块是一个 .panel 面板内含标题和图表容器。代码 3 页面骨架 HTMLindex.html 节选!-- index.html页面骨架 -- div idapp !-- 顶部标题栏创作人 发光标题 实时时钟 -- header classtop div classtitle中国各地区旅游人数可视化数字大屏/div div classclock idclock--:--:--/div /header !-- 主体三栏 -- main classgrid !-- 左栏三个图表面板 -- div classcol col-left div classpanel div classp-title全国各省旅游人数 TOP10/div div idchart-bar classchart/div !-- 图表挂载点 -- /div div classpanel div classp-title游客类型构成占比/div div idchart-pie classchart/div /div div classpanel div classp-title近7日入境游客趋势/div div idchart-line classchart/div /div /div !-- 中栏翻牌器 地图结构对称略 -- div classcol col-center …… /div !-- 右栏城市排行 / 收入来源 / 满意度结构对称略 -- div classcol col-right …… /div /main /div要点每个 .chart 容器必须有确定的高度这里用 height:calc(100% - 34px) 扣除标题高度否则 ECharts 初始化时会因容器高度为 0 而不渲染——这是大屏开发最常见的第一个坑。Step 2深色科技风主题样式约 15 分钟视觉核心是「深蓝背景 霓虹青色发光」。用径向渐变做背景伪元素叠加网格纹理文字用多层 text-shadow 做霓虹发光代码 4 深色科技风核心样式/* 深色科技风核心样式 */ body{ /* 径向渐变顶部微亮 → 深海蓝 → 近黑 */ background:radial-gradient(ellipse at 50% 0%, #062a4a 0%, #020a18 55%, #010510 100%); color:#cfe9ff; font-family:Microsoft YaHei,PingFang SC,sans-serif; overflow:hidden; /* 大屏禁止滚动 */ } /* 网格纹理两组正交线性渐变每 48px 一格 */ body::before{ content:; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(0,242,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,242,255,.05) 1px, transparent 1px); background-size:48px 48px; } /* 标题霓虹发光三层青色阴影叠加 */ header.top .title{ font-size:30px; font-weight:700; letter-spacing:4px; text-shadow:0 0 6px #00f2ff, 0 0 18px #00f2ff, 0 0 42px #00bfff; }面板的「四角边框」用两个伪元素实现——.panel::before 画左上角.panel::after 画右上角代码 5 面板四角亮边 CSS/* 面板半透明底 发光边框 */ .panel{ position:relative; background:rgba(0,30,60,.35); border:1px solid rgba(0,242,255,.35); border-radius:8px; box-shadow:inset 0 0 30px rgba(0,98,255,.12); /* 内发光 */ } /* 左上角亮角 */ .panel::before{ content:; position:absolute; top:0; left:0; width:26px; height:26px; border-top:2px solid #00f2ff; border-left:2px solid #00f2ff; } /* 右上角亮角 */ .panel::after{ content:; position:absolute; top:0; right:0; width:26px; height:26px; border-top:2px solid #00f2ff; border-right:2px solid #00f2ff; }Step 3引入 ECharts 并注册中国地图约 15 分钟ECharts 从 CDN 引入并做双 CDN 兜底主 CDN 失败自动切备用提升加载可靠性代码 6 双 CDN 引入 ECharts!-- 主 CDN国内静态资源加速 -- script srchttps://cdn.staticfile.org/echarts/5.4.3/echarts.min.js/script script // 兜底主 CDN 未加载成功时回退 jsdelivr if(typeof echarts undefined){ document.write(script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js\/script); } /script中国地图需要 GeoJSON 地理数据。不要手写占位坐标血泪经验见 FAQ应从阿里云 DataV 地图选择器下载标准省界数据然后用 registerMap 注册代码 7 注册中国地图// 注册中国地图geoData 为下载的 GeoJSON 对象 // 数据来源https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json echarts.registerMap(china, geoData);注意GeoJSON 中省份名称为全称如「广东省」「广西壮族自治区」业务数据里的名称必须与之一一对应否则数值无法匹配到省份会显示为无数据的默认色。Step 4核心图表实现约 40 分钟本步骤完成 5 个核心图表柱状图、环形饼图、折线图、分段着色中国地图与仪表盘。每个图表均遵循「init 拿到实例 → setOption 注入配置」的两步模式。4.1 各省旅游人数 TOP10 柱状图横向条形用线性渐变填充 圆角代码 8 TOP10 横向柱状图配置// 左栏1TOP10 横向柱状图 const barChart echarts.init(document.getElementById(chart-bar)); barChart.setOption({ grid:{left:8,right:16,top:10,bottom:8,containLabel:true}, xAxis:{type:value, axisLabel:{color:#8fd6ff, fontSize:10}}, yAxis:{type:category, data:provinces.slice().reverse()}, // 倒序使最大值在顶部 series:[{ type:bar, data:tourists.slice().reverse(), barWidth:12, itemStyle:{ // 水平渐变左深右亮 color:new echarts.graphic.LinearGradient(1,0,0,0,[ {offset:0,color:#00bfff},{offset:1,color:#1e90ff} ]), borderRadius:[0,6,6,0] // 右端圆角 }, label:{show:true, position:right, color:#00f2ff, fontSize:10} }] });4.2 游客类型环形饼图内外双半径形成环形代码 9 环形饼图配置// 左栏2环形饼图 pieChart.setOption({ series:[{ type:pie, radius:[38%,68%], // 内外半径 → 环形 itemStyle:{borderColor:#020a18, borderWidth:2}, // 扇区间隙 data:[ {name:散客自由行, value:48, itemStyle:{color:#00f2ff}}, {name:团队游, value:22, itemStyle:{color:#1e90ff}}, {name:自驾游, value:15, itemStyle:{color:#3be1c4}}, {name:亲子游, value:9, itemStyle:{color:#7b6cff}}, {name:研学游, value:6, itemStyle:{color:#ff8c00}} ] }] });4.3 入境趋势平滑面积折线图smooth 平滑 渐变 areaStyle代码 10 平滑面积折线图配置// 左栏3平滑面积折线图 lineChart.setOption({ xAxis:{type:category, data:[周一,周二,周三,周四,周五,周六,周日]}, yAxis:{type:value}, series:[ {name:入境游客, type:line, smooth:true, data:[28,32,30,38,42,55,60], areaStyle:{ // 面积渐变顶部 35% 透明度 → 底部全透明 color:new echarts.graphic.LinearGradient(0,0,0,1,[ {offset:0,color:rgba(0,242,255,.35)}, {offset:1,color:rgba(0,242,255,0)} ]) }}, {name:出境游客, type:line, smooth:true, data:[22,25,24,30,33,40,45]} ] });4.4 中国地图 分段区间着色核心用 visualMap 的 piecewise分段式类型让每个旅游人数区间对应固定颜色比连续渐变更能突出「高 / 中 / 低」分区对比。先看提示框与分段着色配置代码 11 地图 tooltip 与分段 visualMapconst mapChart echarts.init(document.getElementById(chart-map)); mapChart.setOption({ tooltip:{ trigger:item, backgroundColor:rgba(0,20,50,.9), borderColor:#00f2ff, // 悬停显示省名 数值 所属区间 formatter:p{ const v p.value||0; const seg v450?≥450:v350?350-450: v250?250-350:v150?150-250:150