这不双十一刚过十几天，本篇文章就来介绍下如何使用 vue3 + ts + svg + ECharts 实现一个如下所示的双十一数据大屏页面： ![abac904c-fad1-4730-9578-4b32f530cd88.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ae40e56bf23450598f1c0ddbf6a622b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1401\&h=869\&s=287623\&e=gif\&f=52\&b=000000) # 创建项目执行命令 `pnpm create vue@latest` 创建基于 Vite 构建的 vue3 项目，功能选择如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9607107d562456da65e03fafaaa9abc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=652\&h=232\&s=36953\&e=png\&b=0d0d0d) 我选择使用 [pnpm](https://juejin.cn/post/7301610680457543743) 安装项目依赖：`pnpm i`，各安装包的版本号可见于下图： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc24248cad194566a91e1ae76a12fb60~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=894\&h=411\&s=40867\&e=png\&b=0d0d0d) 在 vite.config.ts 中添加配置，以便在项目启动时能自动打开浏览器： ```typescript export default defineConfig({ // ... server: { open: true } }) ``` 现在，就可以通过 `pnpm dev` 启动新建的项目了。 # 大屏适配大屏适配的方案有很多，比如 rem、vw 和 flex 布局等，我选择使用缩放（scale）的方式来适配大屏，因为该方案使用起来比较简单，也不用考虑第三方库的单位等问题。假设设计稿的尺寸为 1920 \* 1080px，为了保证效果，在大屏中放大时应该保持宽高比 `designRatio` 不变，`designRatio` 为 `1920 / 1080 ≈ 1.78`。放大的倍数 `scaleRatio`，可以分为以下 2 种情况计算： * 当用于展示的设备屏幕的宽高比 `deviceRatio` 等于或小于设计稿的宽高比 `designRatio` 时，我们可以按照两者的宽度之比进行缩放，即让设计稿保持宽高比的情况下放大到与设备等宽，在高度上可能留有空白； * 当设备屏幕的宽高比 `deviceRatio` 大于设计稿宽高比 `designRatio` 时，也就是说设备为超宽屏，`scaleRatio` 应该按照两者的高度之比决定，即让设计稿保持宽高比的情况下放大到与设备等高，在宽度上可能留有空白，所以还要做个居中布局。具体代码我封装成了一个 hook： ```typescript // 屏幕适配，src\hooks\useScreenAdapt.ts import _ from 'lodash' import { onMounted, onUnmounted } from 'vue' export default function useScreenAdapt(dWidth: number = 1920, dHeight: number = 1080) { // 节流 const throttleAdjustZoom = _.throttle(() => { AdjustZoom() }, 1000) onMounted(() => { AdjustZoom() // 响应式 window.addEventListener('resize', throttleAdjustZoom) }) // 释放资源 onUnmounted(() => { window.removeEventListener('resize', throttleAdjustZoom) }) function AdjustZoom() { // 设计稿尺寸及宽高比 const designWidth = dWidth const designHeight = dHeight const designRatio = designWidth / designHeight // 1.78 // 当前屏幕的尺寸及宽高比 const deviceWidth = document.documentElement.clientWidth const devicHeight = document.documentElement.clientHeight const deviceRatio = deviceWidth / devicHeight // 计算缩放比 let scaleRatio = 1 // 如果当前屏幕的宽高比大于设计稿的，则以高度比作为缩放比 if (deviceRatio > designRatio) { scaleRatio = devicHeight / designHeight } else { // 否则以宽度比作为缩放比 scaleRatio = deviceWidth / designWidth } document.body.style.transform = `scale(${scaleRatio}) translateX(-50%)` } } ``` 最后是给 `body` 添加了 `transform` 属性，为了实现居中效果，还需要给 body 添加上相应样式： ```css /* \src\assets\base.css */ * { box-sizing: border-box; } body { position: relative; margin: 0; width: 1920px; height: 1080px; transform-origin: left top; left: 50%; background-color: black; } ``` ## 使用 lodash 实现节流为避免改变屏幕尺寸时过于频繁触发 `AdjustZoom`，我借助 lodash 的 `throttle` 方法做了个节流，这就需要安装 lodash：`pnpm add lodash`。因为用到了 ts，如果直接引入使用 lodash 会遇到如下报错： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5db592cfecc4cc0a676e43544633ae7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840\&h=126\&s=14133\&e=png\&b=f3f3f3) 我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。提示里已经告诉了我们解决办法，就是去安装 @types/lodash：`pnpm add -D @types/lodash`，之后就能在 ts 文件中正常使用 lodash 了。 # 使用 svg 页面头部使用的就是一张 [svg](https://juejin.cn/post/7294597695477710884)，样式中给 `#top` 添加绝对定位 `position: absolute;` ，目的在于开启一个单独的渲染层，以减少之后添加动画造成的回流损耗： ```vue ``` 作为背景引入的 top\_bg.svg 是我使用 Illustrator 绘制后导出的，绘制时注意做好图层的命名： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45da319fbe1943ecaf7eded988867c7c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=449\&h=321\&s=23290\&e=png\&b=505050) 因为图层的名称会影响到导出的 svg 文件中元素的 id 名称。另外导出的 svg 文件中也可能存在一些中文命名或一些不必要的代码，我们可以自行修改： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b57284e768b477ab9c6ae72c0d2e033~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=877\&h=512\&s=41288\&e=png\&b=f5f3f3) ## 添加动画及滤镜使用 Illustrator 绘制的都是静态图形，现在我们以其中一个圆球为例，添加上平移的动画以及高斯模糊的滤镜： ```xml ``` 动画使用 css 定义，可以直接写在 `` 里的 ` ``` 在页面引入 `BaseEChart` 后，传入定义好的 `amountRankOption` 即可： ```typescript // 人均消费金额排名柱状图配置 import * as echarts from 'echarts' type EChartsOption = echarts.EChartsOption export const amountRankOption: EChartsOption = { grid: { top: 20, bottom: 50, left: 40, right: 40 }, xAxis: { axisTick: { show: false // 隐藏 x 坐标轴刻度 }, data: ['思明', '湖里', '集美', '同安', '海沧', '翔安'] }, yAxis: { axisLabel: { show: false // 隐藏 y 坐标轴刻度标签 }, splitLine: { show: false // 隐藏平行于 x 轴的分隔线 } }, series: [ { type: 'bar', data: [5, 20, 36, 10, 10, 20], barWidth: 20 // 设置柱形的宽度 } ] } ``` 至于剩下的图表的实现，只是配置不同而已，如有兴趣可以去该项目的 git 仓库查看。 # 数字滚动动画最后添加成交额的数字滚动动画，用到了 [countup.js](https://www.npmjs.com/package/countup.js)，需要先安装： `pnpm add countup.js`。使用时，直接 `new CountUp()` 生成 `countUp`，第 1 个参数为要添加动画的 dom 的 id，第 2 个参数为动画结束时显示的数字，还可以传入第 3 个参数 options 实现一些配置，比如设置前缀，小数点等。然后通过 `countUp.start()` 即可实现动画效果： ```vue ``` > 项目 git 仓库：[github](https://github.com/chaimHL/front-end-visualization/tree/master/%E5%A4%A7%E5%B1%8F%E9%80%82%E9%85%8D/vue3/consumer_data_on_Double_Eleven)、[gitee](https://gitee.com/chaimhl/front-end-visualization/tree/master/%E5%A4%A7%E5%B1%8F%E9%80%82%E9%85%8D/vue3/consumer_data_on_Double_Eleven) ![感谢.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d160e26986d1447e8ef2dfe783fc6eb6~tplv-k3u1fbpfcp-watermark.image#?w=1920\&h=1080\&s=1605675\&e=gif\&f=125\&b=3f7b7d) ![点赞.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a7fbbcaca1c480c942b7735a7228e9f~tplv-k3u1fbpfcp-watermark.image#?w=1800\&h=363\&s=230657\&e=png\&b=ffffff)