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

稀

飞天猫猫头2025年07月24日约 3 分钟

📝项目背景

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

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

最终效果如下：

📦项目地址

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

github.com/leixq1024/sd-tourism-dashboard-open

🌐在线预览

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

在线预览：sd-tourism-dashboard-open.vercel.app/

🛠️ 技术栈

技术	版本	用途
「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的地址：datav.aliyun.com/portal/school/atlas/area_selector?spm
❞

第一步先获取地图行政区的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          }        }      },    ],  }