边框由标题和主体两部分组成。背景采用背景色加角标定位，适应大部分宽高而不变形。
如果您需要设计属于自己的数据可视化大屏或前端vue3数据可视化大屏开发 请联系我们微信:17331886870
效果图
效果演示
组件代码
组件包含了三部分：标题 主体 背景。
主体部分放了一个插...
yekong
2年前 (2023-05-19)
喜欢
vue3 数据大屏中经常做一些小标题样式，今天整理一些在数据可视化大屏小标题样式效果。如果将来数据大屏中合适的样式的可以直接拿来用。
vue3 小标题样式效果
组件代码
<template>
<div class="titleBg"&g...
yekong
2年前 (2023-05-17)
喜欢
数据可视化大屏 页面都会有一个特色的小标题，用来放标题，今天整理 vue3 数据可视化大屏标题组件-海关信息中心。
效果描述
右上角有个圆点，高度48px 宽度自适应。
为了适配宽度，图片被分解为左中右三部分。
演示地址
组件代码
<template>
<...
yekong
2年前 (2023-05-17)
喜欢
echarts 饼状图效果实例-学历结构
数据可视化大屏项目开发中，有一个echarts饼状图效果，左侧是环形饼状图，饼状图中间有一个自定义背景图片，并且显示数字和标题，右侧是对饼状图各个数据的描述。
组件代码
<template>
<div class=...
yekong
2年前 (2023-05-13)
喜欢
最近在做一个2.5效果的 数据可视化大屏 其中有一个效果是一个水罐页面上升，里面带有一个小风扇要一直旋转。
实现思路
风扇旋转我们可以通过css来实现。
页面上升我们可以通过gsap补间动画来实现。
演示实例
gsap 实现水罐页面上升效果实例
实现代码
<templa...
yekong
2年前 (2023-05-06)
喜欢
vue3 数据大屏 项目开发中，会需要一些单选的效果，图表使用自定义图片，这里将实现效果记录下来方便复用。
使用实例
<template>
<div class="tabs">
<item v-model:activ...
yekong
2年前 (2023-05-06)
喜欢
vue 数据大屏项目开发中，需要一个switch开关，element ui有类似的效果，不过和设计图的样式还是有差异的，所以就想着自己写一个，这里面的动画我们用的是gsap补间动画。
实现思路
我们首先通过css实现按钮样式，然后给按钮添加点击事件来改变状态，通过状态的变化来...
yekong
2年前 (2023-05-05)
喜欢
vue3数据大屏 项目开发中，需要设置一个全局年份供各个组件调用，但是在设置后发现无法更新年份排查发现原因是：state 中的字段名和 getters 方法名相同造成的。
修改前
getters: {
years() {
var year ...
yekong
2年前 (2023-05-03)
喜欢
数据可视化大屏 项目开发时，一些客户比较抓细节，今天的细节是标题，客户要求页面跳转后，标题也跟着变化，vue项目属于单页项目，我们需要根据路由跳转进行标题动态修改，因为是pc端，不用考虑手机上面标题修改的兼容性。我们只需要修改document.title的值就可以了。
添加路由导...
yekong
2年前 (2023-05-02)
喜欢
数据可视化大屏辅助工具
在我们写数据可视化大屏页面的时候，我们需要一些辅助工具，来让帮助我们快速完成我们的项目。
蓝湖是一款不错的辅助工具，能够让我们快速从设计图中获取我们想要的参数。
photoshop Cutterman切片工具，可以快速将我们需要的图片导出到我们的文件夹中。...
yekong
2年前 (2023-04-29)
喜欢
