企业官网建设流程全解析

2026 年 10 月 · 技术栈：HTML5 + ECharts 5.4.3

目录

TL;DR

一、最终效果展示

二、技术栈一览

三、页面整体布局结构

四、制作流程详解

五、配色方案总结

六、常见问题 FAQ

七、总结与扩展方向

TL;DR

本文完整讲解如何用单文件 HTML + ECharts 5 制作一个深色科技风的「中国各地区旅游人数可视化数字大屏」：三栏栅格布局、真实中国省界地图（按旅游人数区间分段着色）、数字翻牌器、实时时钟、7 个图表模块，零构建、双击浏览器即可运行。文末附制作中实际踩过的坑（地图不显示的根因与修复）。

一、最终效果展示

大屏整体为深色科技蓝主题，顶部霓虹发光标题栏，主体三栏布局：左栏三个图表面板（TOP10 柱状图、游客类型饼图、入境趋势折线图），中栏数字翻牌器与中国地图，右栏三个图表面板（城市排行、收入来源、满意度仪表盘）。图 1 大屏整体效果（1920×1080）

地图支持按旅游人数区间分段着色：不同人数区间的省份使用固定的离散颜色，悬停可查看具体数值与所属区间，支持缩放漫游。

二、技术栈一览

三、页面整体布局结构

大屏采用经典的三栏式 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 ｜页面骨架 HTML（index.html 节选）

<!-- index.html：页面骨架 --> <div id="app"> <!-- 顶部标题栏：创作人 + 发光标题 + 实时时钟 --> <header class="top"> <div class="title">中国各地区旅游人数可视化数字大屏</div> <div class="clock" id="clock">--:--:--</div> </header> <!-- 主体三栏 --> <main class="grid"> <!-- 左栏：三个图表面板 --> <div class="col col-left"> <div class="panel"> <div class="p-title">全国各省旅游人数 TOP10</div> <div id="chart-bar" class="chart"></div> <!-- 图表挂载点 --> </div> <div class="panel"> <div class="p-title">游客类型构成占比</div> <div id="chart-pie" class="chart"></div> </div> <div class="panel"> <div class="p-title">近7日入境游客趋势</div> <div id="chart-line" class="chart"></div> </div> </div> <!-- 中栏：翻牌器 + 地图（结构对称，略） --> <div class="col col-center"> …… </div> <!-- 右栏：城市排行 / 收入来源 / 满意度（结构对称，略） --> <div class="col 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 src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script> <script> // 兜底：主 CDN 未加载成功时回退 jsdelivr if(typeof echarts === "undefined"){ document.write('<script src="https://cdn.jsdelivr.net/npm/echarts@5.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 横向柱状图配置

// 左栏1：TOP10 横向柱状图 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 与分段 visualMap

const 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 = v>=450?"≥450":v>=350?"350-450": v>=250?"250-350":v>=150?"150-250":"<150