之前我们完成了数据可视化大屏页面布局写法，今天我们来给数据大屏添加入场动画元素，让元素动起来。动画我们使用的是wow.js来实现入场动画.
安装依赖
pnpm i wow.js
引入animate.css
main.js引入动画css
import 'wow.js/css/li...
yekong
2年前 (2023-03-30)
喜欢
vue3 数据可视化大屏项目开发前，我们需要先对大屏进行布局，把整体框架给搭建起来，然后一块作为，其他区域每一块作为一个组件单独来写，最后就像堆积木一样，将其放在对应的位置这样一个数据大屏页面就完成了。
头部和主体
从上面的数据大屏设计图来看，我们可以先分为两部分，头部和身体两...
yekong
2年前 (2023-03-30)
喜欢
因为gz压缩只能压缩代码，所以vue3 vite完成gz压缩后，文件仍然很大，项目中仍然有很多图片，以及字体文件等，这时候我们可以考虑使用cdn加速。
因为七牛每个月免费提供10g的流量，所以这里我们使用七牛云，在使用七牛云前，我们首先要注册一个七牛云
使用前我们要考虑自动化，编...
yekong
2年前 (2023-03-29)
喜欢
vue3 vite 数据可视化大屏 项目开发完成后，在打包时，考虑到文件体积，我们需要进行gz压缩，以节省带宽，提升加载速度。gz压缩会压缩js和css文件，我们可以进行对比文件大小查看效果。通过对比我们看到压缩效果很明显。压缩前最大的文件是1.2M,压缩后最大的文件是395k....
yekong
2年前 (2023-03-29)
喜欢
vue3 数据可视化大屏 项目开发中，为了让项目页面更酷炫，会增加很多动画效果，今天使用 gsap补间动画 实现线条延伸动画效果。
线条延伸效果，是通过一条线将两个div进行连接，让线条的宽度从0延伸到自己想要的长度，达到一个线条延伸的效果。
上面的动画中有一个水柱上升的效果是...
yekong
2年前 (2023-03-29)
喜欢
vue 实现波浪柱状图效果实例，通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。
组件代码
/**
* @Author: 858834013@qq.com
* @Name: waterSpout
* @Date: 2023年03月27日
* @Desc: 水柱
...
yekong
2年前 (2023-03-28)
喜欢
进度条效果：
进度条颜色是渐变色，可以通过传值自定义
进度条带有动画效果 使用gsap实现补间动画
进度条有最大宽度，给右侧留有展示数据的空间
进度条有默认背景色
进度条宽度根据总数和当前数据计算百分比
使用组件
<progressBar class="wow ...
yekong
2年前 (2023-03-27)
喜欢
vue3 vite 数据可视化大屏 项目开发中需要和后端进行数据交互，这需要后端开发人员提供接口文档，前端开发人员根据接口文档进行接口调用。
安装依赖
要请求接口数据我们需要插件，这里我们使用axios来请求接口
使用pnpm来安装依赖
pnpm i axios
使用axios...
yekong
2年前 (2023-03-27)
喜欢
vue vite项目中引入glsl文件后会报错Unexpected identifier 'vec2'，我们需要配置一下vite-plugin-glsl。
安装依赖
pnpm i vite-plugin-glsl
编辑vite.config.js文件
import {defin...
yekong
2年前 (2023-03-25)
喜欢
vue 数据可视化大屏项目开发中，有一个类似echarts柱状图的效果实例，不过和柱状图有一些区别，所以使用的html+css+js的方式来写的。
效果要求
柱状图组件按照百分比占比来表示长度，为了避免数字占比小而无法装下数字，设置了一个最小宽度。
左下角有说明标签，标签点击后可...
yekong
2年前 (2023-03-22)
喜欢
