边框由标题和主体两部分组成。背景采用背景色加角标定位,适应大部分宽高而不变形。
如果您需要设计属于自己的数据可视化大屏或前端vue3数据可视化大屏开发 请联系我们微信:17331886870
效果图
效果演示
组件代码
组件包含了三部分:标题 主体 背景。
主体部分放了一个插...
yekong
1周前 (05-19) 33℃
0喜欢
vue3 数据大屏中经常做一些小标题样式,今天整理一些在数据可视化大屏小标题样式效果。如果将来数据大屏中合适的样式的可以直接拿来用。
vue3 小标题样式效果
组件代码
<template>
<div class="titleBg"&g...
yekong
1周前 (05-17) 101℃
0喜欢
数据可视化大屏 页面都会有一个特色的小标题,用来放标题,今天整理 vue3 数据可视化大屏标题组件-海关信息中心。
效果描述
右上角有个圆点,高度48px 宽度自适应。
为了适配宽度,图片被分解为左中右三部分。
演示地址
组件代码
<template>
<...
yekong
1周前 (05-17) 65℃
0喜欢
vue3 数据可视化大屏 中,经常会需要各种效果的表格,这里将各种表格效果整理在一块,方便复用。
6. vue3 滚动表格外加状态样式效果
vue3 滚动表格外加状态样式效果
5. vue3 带进度条表格效果
组件代码:vue3 带进度条表格效果
4. vue3 表格自定义排...
yekong
2周前 (05-16) 180℃
0喜欢
echarts 饼状图效果实例-学历结构
数据可视化大屏项目开发中,有一个echarts饼状图效果,左侧是环形饼状图,饼状图中间有一个自定义背景图片,并且显示数字和标题,右侧是对饼状图各个数据的描述。
组件代码
<template>
<div class=...
yekong
2周前 (05-13) 41℃
0喜欢
最近在做一个2.5效果的 数据可视化大屏 其中有一个效果是一个水罐页面上升,里面带有一个小风扇要一直旋转。
实现思路
风扇旋转我们可以通过css来实现。
页面上升我们可以通过gsap补间动画来实现。
演示实例
gsap 实现水罐页面上升效果实例
实现代码
<templa...
yekong
3周前 (05-06) 40℃
0喜欢
vue3 数据大屏 项目开发中,会需要一些单选的效果,图表使用自定义图片,这里将实现效果记录下来方便复用。
使用实例
<template>
<div class="tabs">
<item v-model:activ...
yekong
3周前 (05-06) 40℃
0喜欢
vue 数据大屏项目开发中,需要一个switch开关,element ui有类似的效果,不过和设计图的样式还是有差异的,所以就想着自己写一个,这里面的动画我们用的是gsap补间动画。
实现思路
我们首先通过css实现按钮样式,然后给按钮添加点击事件来改变状态,通过状态的变化来...
yekong
3周前 (05-05) 56℃
0喜欢
vue3 数据可视化大屏 - 数据资产大屏 项目开发中, 需要下拉菜单选择内容,设计师对这个下拉菜单做了美化,在设计图中多余遇到不同样式的下拉菜单,每次都要重新写样式,很耗费时间,所以想着把可能会修改的关键代码都列出来,下次就可以针对性的修改,节省开发时间。
因为element-...
yekong
4周前 (05-03) 173℃
0喜欢
vue 数据可视化大屏 实现进度条效果,通过10种颜色图标实现进度条背景色。
演示地址
使用组件
<template>
<div class="list">
<div class="titleBody&q...
yekong
4周前 (04-28) 52℃
0喜欢