20250706-🚣【附源码】牺牲两天摸鱼时间，我做了款大屏

原文摘要

📝项目背景

最近时间比较闲,摸鱼的时间越来越多了,人一闲下来就会想做点什么。说干就干，立马行动。

在刷了半小时pdd之后我买了张ui图，并根据这个ui做了一个大屏。

最终效果如下：

requestAnimationFrame效果.gif

📦项目地址

这里附上项目地址，如果你觉得不错的话，帮我点一个小小的start。

👉 点我访问项目源码，欢迎 Star

🌐在线预览

这个预览地址是vercel的地址，如果你没有挂梯子的话，会访问不了。访问不了的话，建议直接本地跑项目。

在线预览

🛠️ 技术栈

技术	版本	用途
Vue	3.5.13	前端框架
TypeScript	5.7.2	类型安全
Vite	6.1.0	构建工具
ECharts	5.6.0	数据可视化
Sass	1.89.2	CSS预处理器
Vue3-scroll-seamless	1.0.6	无缝滚动
autofit.js	3.2.8	适配不同分辨率的屏幕
vue3-odometer	0.1.3	数字翻牌效果

项目主要是vue3+echarts的组合，整个项目主要都是一些图表的应用。下面会介绍一些模块的实现思路。

💻一些模块的实现

🗺️中间地图

DataV的地址

第一步先获取地图行政区的geo数据，以我这个项目为例，我需要获取山东省的地图数据。

打开dataV，找到数据可视化学院，在里面找到需要的行政区，把它的geojson下载下来。

下载下来的数据长这样

这就是我们需要的geojson数据了。

拿到数据之后，就需要将其渲染出来。

这里我用的是echarts的地图。因为这个项目的地图，基本没有交互，就纯纯的数据展示。使用echarts来做的效果会比，cesium那些更好。

注册地图

import * as echarts from 'echarts'
import sdData from '@/assets/data/山东省'
echarts.registerMap('sd', sdData as any)

先将前面下载来的数据geojson数据注册到echarts里面，并配置echarts的geo选项

{
    geo: [
      // 最外围发光边界
      {
        map: 'sd',
        aspectScale: 0.85,
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '100%',
        z: 12,
        emphasis: {
          disabled: true
        },
        itemStyle: {
          normal: {
            borderColor: 'rgb(180, 137, 81)',
            borderWidth: 8,
            shadowColor: 'rgba(218, 163, 88, 0.4)',
            shadowBlur: 20
          }
        }
      },
    ],
  }

这时候渲染出来的地图是纯色的，什么都没有也没有立体。

因为这个geo是一个平面的地图，想要立体效果，可以通过堆叠地图，并且设置位移的方式实现

比如我这边就通过这种方式去实现

通过叠加多个图层，并且每个图层的layoutCenter都不同

最终就可以实现这种看起来很立体的二维地图

具体实现代码可以访问我的github仓库看，这里只介绍一下大致思路

🔢底部的数字字体和轮播

可以看到我底部的数字字体很特别，这不是图片，这是一种电子屏风格的数字字体。

我们在网上找一个类似的字体，将其下载下来，并用css的@font-face将其引入。然后在需要的地方用font-family使用即可。

除了这个，这里还有一个数字的轮播效果，我是用vue3-odometer实现的。

为什么用这个库呢，主要是使用方便，不用配置一堆乱七八糟的。

📊其他图表

其它图表就比较常规了，这里就不做过多介绍，具体可以看源码的实现。

🔚 结尾

这个大屏虽然只有一个页面，但是做的时候，相关的图表配置调整还是挺多的。后续打算开发一个mini版的后台管理，用来管理大屏数据，并且这个后台管理的接口用node开发，用来当作node后端的练习。

原文链接

进一步信息揣测

UI设计捷径：可直接在拼多多等非传统设计平台低价购买现成UI设计图（如文中提到的PDD购买UI图），节省设计成本和时间，但需注意版权风险。
地图数据获取技巧：阿里云DataV平台提供免费行政区GeoJSON数据下载（如山东省地图），适合基础可视化需求，避免从官方渠道申请或付费获取的繁琐流程。
技术选型内幕：纯展示型地图优先用ECharts而非Cesium等重型工具，因ECharts轻量且渲染效果足够，尤其适合无交互需求的场景。
海外部署坑点：Vercel免费部署的预览地址需梯子访问，国内用户需本地运行项目，暗示海外服务商对国内网络支持不稳定的隐性成本。
冷门库推荐：小众库如vue3-scroll-seamless（无缝滚动）、autofit.js（屏幕适配）能解决特定需求，但社区资源少，需自行踩坑调试。
版本敏感性问题：明确列出依赖版本（如Vue 3.5.13、TypeScript 5.7.2），暗示某些库的新版本可能存在兼容性问题，锁定版本可避免意外错误。
数据可视化优化：数字翻牌效果选用vue3-odometer而非手动实现，说明现成轮子能提升效率，但需注意小众库的维护风险。
项目推广策略：通过技术博客附带GitHub链接求Star，反映开发者社区常见的“曝光-引流”增长模式，隐含开源项目冷启动的推广压力。