数据可视化大屏 项目开发中经常会需要各种各样的边框,为了方便复用可能会出现的类似边框,这里将可能会遇到的 数据可视化大屏边框组件 都整理出来,今天整理的是四角边框效果。
效果截图
演示地址:
vue3 数据可视化大屏边框组件-四角边框
组件代码
<template>...
2年前 (2023-04-15)
喜欢
最近有一个数据可视化大屏开发,需要一个动画效果。列表环绕旋转动画效果。这个效果和上一个效果gsap补间动画环绕运行效果比较类似,只不过上一个效果是单个组件实现动画,当前效果是多个组件实现动画。客户看了以后增加了一项要求,就是动画中的两行高度是不一样的,上面的高一些,下面的矮一些,...
2年前 (2023-04-14)
喜欢
之前我们通过 gsap 补间动画 插件实现了 gsap 补间动画列表环绕旋转动画效果,客户看了以后增加了一项要求,就是动画中的两行高度是不一样的,上面的高一些,下面的矮一些,这就需要我们对代码进行调整了。
效果演示
效果要求:
列表上下两种高度,上面的占比60%下面的占比40...
2年前 (2023-04-14)
喜欢
vue3数据大屏开发时,为了让页面更酷炫,会增加很多动画效果,这一次我们使用 gsap补间动画 插件来实现一个4个角向中间汇聚的效果。
项目演示
vue3 数据可视化大屏智能科技登录页
效果描述
根据设计图来看当前边框有4个角标的效果,我们给这4个角标增加一个动画,从透明到不透...
2年前 (2023-04-14)
喜欢
vue 数据可视化大屏开发中,因为大屏都是一个一个的模块组成,除了实现效果外,我们还需要考虑组件的可移植性和复用性,避免因为数据导致组件使用混乱。尽可能做到组件拿来即用。
请求接口
首先组件封装,当前组件我们只做一件事请求接口,把接口的数据传给echarts子组件。
<te...
2年前 (2023-04-10)
喜欢
在vue项目中,echarts图表为了看起来酷炫,会使用渐变色效果,我们可以通过vue的计算属性来生成渐变色的代码,然后赋值给echarts.
生成渐变色
computed: {
colorList: function () {
var list = [{
...
2年前 (2023-04-10)
喜欢
因为项目组件过多,但是项目每个组件都是一个效果,可以单独预览,又不想每个组件都就加入到路由当中,所以设置为根据参数动态获取组件
在Vue3中,动态引入组件可以使用defineAsyncComponent函数。该函数返回一个异步组件对象,可以在组件需要渲染时再加载。
我们先通过de...
2年前 (2023-04-08)
喜欢
vue2 element ui Carousel需要给固定数值的高度,但是自己写的页面需要Carousel跟随父div的高度变化.
我们可以动态获取高度,并赋值给el-carousel height,为了避免el-carousel下的子组件渲染变形,我们先让其隐藏,获取高度后再显...
2年前 (2023-04-06)
喜欢
vue2项目开发中,需要一个功能,tab切换后,走马灯也要同步切换,查看官方文档后,发现有一个方法setActiveItem我们通过这个方法来实现切换。
tab操作
这边使用的是sync来更新active的,所以我们添加一个监听,监听到active的变化后,触发方法就可以了。...
2年前 (2023-04-05)
喜欢
vue3 可视化数据大屏项目开发中,数据大屏ui界面会设置一些底座效果用来衬托数据,今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。
组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。
演示地址
vue3 底座效果实例
项目应...
2年前 (2023-04-03)
喜欢