【附源码】牺牲两天摸鱼时间，我做了款大屏
项目背景
最近时间比较闲,摸鱼的时间越来越多了,人一闲下来就会想做点什么。说干就干，立马行动。
在刷了半小时 pdd 之后我买了张 ui 图，并根据这个 ui 做了一个大屏。
最终效果如下：
如果你没有挂梯子的话，会访问不了。访问不了的话，建议直接本地跑项目。
技术栈
项目主要是 vue3 + echarts 的组合，整个项目主要都是一些图表的应用。下面会介绍一些模块的实现思路。
一些模块的实现
中间地图
第一步先获取地图行政区的 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 都不同
最终就可以实现这种看起来很立体的二维地图
底部的数字字体和轮播
可以看到我底部的数字字体很特别，这不是图片，这是一种电子屏风格的数字字体。
我们在网上找一个类似的字体，将其下载下来，并用 css 的 @font-face 将其引入。然后在需要的地方用 font-family 使用即可。
除了这个，这里还有一个数字的轮播效果，我是用 vue3-odometer 实现的。
为什么用这个库呢，主要是使用方便，不用配置一堆乱七八糟的。
其他图表
其它图表就比较常规了，这里就不做过多介绍，具体可以看源码的实现。
结尾
这个大屏虽然只有一个页面，但是做的时候，相关的图表配置调整还是挺多的。后续打算开发一个mini版的后台管理，用来管理大屏数据，并且这个后台管理的接口用 node 开发，用来当作 node 后端的练习。
