给重庆文旅集团做的数智驾驶舱

背景¶

用户最初只想要"智能驾驶舱"的视觉复刻。原图是一张典型的国内大屏设计稿:深蓝近黑底色、青色主调、四角缺口装饰、KPI 数字外发光。

我没有先开始写代码,先做了一件事 —— 分析气质。

• 深蓝近黑 #040b1f + 青色 #3ad9ff 单强调色
• KPI 数字必须用等宽字体 + 青色外发光
• 卡片必须有"四角缺口"装饰
• 表格只有下划虚线,没有边框线

技术选型¶

不上框架。直接单文件 HTML + ECharts CDN。

# 选择
options = [
    "React + ECharts",  # 太重
    "Vue + ECharts",    # 太重
    "纯 HTML + CDN"     # 选这个
]

地图:SVG 自绘 + ECharts 叠加¶

底层 SVG 画重庆轮廓 + 光弧,上层 ECharts effectScatter 撒点位。

部署¶

Caddyfile 9 行搞定。sudo systemctl reload caddy,curl 公网打通。

踩坑¶

3 个真实的坑:

1. Caddy reload 失败但服务显示 active —— 必须用 curl 实测
2. 文件权限 403 —— 挪到 /var/www/cockpit + chown
3. 日志目录写不进 —— 删掉自定义日志就行