vue 数据可视化大屏中，有时会需要显示一个占比进度条，两种类型根据数量显示占比，但是直接把样式写出来，又感觉单调了一点，于是想着能不能增加一个动画效果呢？让这个占比有一个推进的效果。
因为在之前已经写过一个类似的进度条占比效果，所以我们直接拿过来在之前的基础上微调一下就可以...
yekong
2年前 (2023-03-30)
喜欢
上一节，我们实现了使用echarts绘制柱状图，这一节我们来完成第二个区域的功能，使用echarts绘制环形饼状图.
设计图的效果图如下：
看效果比较眼熟,和自己之前做过的项目数据可视化大屏 - 固废全过程一个效果很相似，我们拿过来改一下应该就可以用了。当我们效果积累到多了，就...
yekong
2年前 (2023-03-30)
喜欢
上一节，我们实现了数据可视化大屏入场动画教程，这一节我们来完成第一个区域的功能，使用echarts绘制柱状图.
根据数据大屏设计图来看，我们一共有10个区域，所以我们创建10个item,来对应这10个区域.
为什么用编号不用名称呢？一开始的项目中，用过拼音用过英文，但是实际开发的...
yekong
2年前 (2023-03-30)
喜欢
之前我们完成了数据可视化大屏页面布局写法，今天我们来给数据大屏添加入场动画元素，让元素动起来。动画我们使用的是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)
喜欢
