vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理渐变色背景滚动表格效果。
这里表格背景我们使用相对定位的方式将背景模块放在表格后面。来达到渐变背景色的效果。
演示地址
使用组件
<template>
<div class="it...
yekong
1年前 (2023-04-17) 528℃
0喜欢
数据可视化大屏 项目开发中经常会需要各种各样的边框,为了方便复用可能会出现的类似边框,这里将可能会遇到的 数据可视化大屏边框组件 都整理出来,今天整理的是渐变色加两个底角效果。
效果截图
演示地址:
vue3 数据可视化大屏边框组件-渐变色加两个底角效果
组件代码
<te...
yekong
1年前 (2023-04-15) 619℃
0喜欢
数据可视化大屏 项目开发中经常会需要各种各样的边框,为了方便复用可能会出现的类似边框,这里将可能会遇到的 数据可视化大屏边框组件 都整理出来,今天整理的是四角边框效果。
效果截图
演示地址:
vue3 数据可视化大屏边框组件-四角边框
组件代码
<template>...
yekong
1年前 (2023-04-15) 744℃
0喜欢
vue3 可视化数据大屏项目开发中,数据大屏ui界面会设置一些底座效果用来衬托数据,今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。
组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。
演示地址
vue3 底座效果实例
项目应...
yekong
1年前 (2023-04-03) 582℃
0喜欢
element-plus Menu在使用的时候,我们需要点击菜单后跳转到对应的路由页面,并且默认展开当前路由所在的分组,以及记过当前所在的菜单
element-plus menu说明文档
激活路由模式
将:router="true"后,点击菜单就可以实现路由...
yekong
1年前 (2023-04-01) 1442℃
0喜欢
vue 实现波浪柱状图效果实例,通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。
组件代码
/**
* @Author: 858834013@qq.com
* @Name: waterSpout
* @Date: 2023年03月27日
* @Desc: 水柱
...
yekong
1年前 (2023-03-28) 580℃
0喜欢
vue 数据可视化大屏项目开发中,有一个类似echarts柱状图的效果实例,不过和柱状图有一些区别,所以使用的html+css+js的方式来写的。
效果要求
柱状图组件按照百分比占比来表示长度,为了避免数字占比小而无法装下数字,设置了一个最小宽度。
左下角有说明标签,标签点击后可...
yekong
1年前 (2023-03-22) 540℃
0喜欢
vue数据可视化大屏 开发中,需要一个进度条的效果,这里使用的是两个图片来实现的,一个背景图,还有一个进度条背景图。然后增加一个长度限制,默认是0每10毫秒增加1直到增加到给定的百分比停止,形成一个渐变的动画。
更多进度条效果实例
vue 数据可视化大屏进度条效果实例
使用
&...
yekong
1年前 (2023-03-03) 564℃
0喜欢
vue3 数据可视化大屏 项目中需要tab切换效果,之前写过类似的效果了,vue tab_line_sync 组件,不过是vue2的方式写的,vue3的sync已经不能用了,所以重新再写一遍。
使用
<template>
<div class="...
yekong
1年前 (2023-03-02) 851℃
0喜欢
vue3 数据大屏可视化 项目中要求使用腾讯地图,这里将自己实现的代码记录下来,方便复用。数据大屏可视化ui设计的地图很华丽,但是使用腾讯地图没办法实现这种样式效果。vue3使用腾讯地图添加自定义图标
演示demo:vue3数据可视化大屏-科技管理大屏案例演示
申请腾讯地图k...
yekong
1年前 (2023-03-02) 1326℃
0喜欢