element-plus Menu在使用的时候，我们需要点击菜单后跳转到对应的路由页面，并且默认展开当前路由所在的分组，以及记过当前所在的菜单
element-plus menu说明文档
激活路由模式
将:router="true"后，点击菜单就可以实现路由...
2年前 (2023-04-01)
喜欢
vue3 可视化数据大屏项目开发 中，数据大屏ui界面会设置一些底座效果用来衬托数据，今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。
组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。
更多底座效果
vue3 底座效果实例集...
2年前 (2023-04-01)
喜欢
vue数据可视化大屏项目中会遇到各种各样的需求，随着项目的积累，效果也越来越多，为了提升开发效率，也会不断的积累效果代码，让其能够快速应用到新的项目用。
下面整理出最近在做项目时，所积累下来的一些效果实例。
echarts
echarts是数据可视化大屏项目用用的最多的插件之一，...
2年前 (2023-03-31)
喜欢
vue3 数据可视化大屏项目中，因为数据需要，我们需要先通过接口获取到列表数据，然后再通过列表数据中指定的字段来获取下一级数据，这时候我们需要进行循环请求接口。
请求接口获取列表
首先请求接口获取列表，然后for循环，获取指定字段的值，通过这个值再次请求接口。
getData()...
2年前 (2023-03-31)
喜欢
vue项目开发中，为了让大屏更酷炫，会添加很多动画元素，今天来讲一下vue下transition结合gsap补间动画插件实现动画效果。
安装依赖
npm install gsap
引入组件
import gsap from 'gsap';
使用JavaScript来执行过渡动...
2年前 (2023-03-31)
喜欢
vue 数据可视化大屏中，有时会需要显示一个占比进度条，两种类型根据数量显示占比，但是直接把样式写出来，又感觉单调了一点，于是想着能不能增加一个动画效果呢？让这个占比有一个推进的效果。
因为在之前已经写过一个类似的进度条占比效果，所以我们直接拿过来在之前的基础上微调一下就可以...
2年前 (2023-03-30)
喜欢
上一节，我们实现了使用echarts绘制柱状图，这一节我们来完成第二个区域的功能，使用echarts绘制环形饼状图.
设计图的效果图如下：
看效果比较眼熟,和自己之前做过的项目数据可视化大屏 - 固废全过程一个效果很相似，我们拿过来改一下应该就可以用了。当我们效果积累到多了，就...
2年前 (2023-03-30)
喜欢
上一节，我们实现了数据可视化大屏入场动画教程，这一节我们来完成第一个区域的功能，使用echarts绘制柱状图.
根据数据大屏设计图来看，我们一共有10个区域，所以我们创建10个item,来对应这10个区域.
为什么用编号不用名称呢？一开始的项目中，用过拼音用过英文，但是实际开发的...
2年前 (2023-03-30)
喜欢
之前我们完成了数据可视化大屏页面布局写法，今天我们来给数据大屏添加入场动画元素，让元素动起来。动画我们使用的是wow.js来实现入场动画.
安装依赖
pnpm i wow.js
引入animate.css
main.js引入动画css
import 'wow.js/css/li...
2年前 (2023-03-30)
喜欢
vue3 数据可视化大屏项目开发前，我们需要先对大屏进行布局，把整体框架给搭建起来，然后一块作为，其他区域每一块作为一个组件单独来写，最后就像堆积木一样，将其放在对应的位置这样一个数据大屏页面就完成了。
头部和主体
从上面的数据大屏设计图来看，我们可以先分为两部分，头部和身体两...
2年前 (2023-03-30)
喜欢
