【附源码】牺牲两天摸鱼时间，我做了款大屏 ??项目背景最近时间比较闲, 摸鱼的时间越来越多了, 人一闲下来就会想做点什么。说干就干，立马行动。 在刷了半小时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.2CSS 预处理器「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*asechartsfrom'echarts'importsdDatafrom'@/assets/data/山东省'echarts.registerMap('sd', sdDataasany)先将前面下载来的数据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后端的练习。 AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文