web

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

📝项目背景

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

在刷了半小时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

          }

        }

      },

    ],

  }