数据可视化大屏项目开发中,会遇到ui设计图中文字是渐变色加阴影的效果。
ui设计图效果如下
css实现
我们通过蓝湖生成的css生成出来的样式效果,这和我们的预期差别太大了。
这里我们可以使用伪类来实现我们想要的效果
使用伪元素
通过使用伪元素 ::before 或 ::af...
yekong
3个月前 (09-01)
喜欢
在后台项目开发过程中,客户反应图片加载太慢,限于服务器带宽只有1M,大的图片加载会比较慢,于是将图片上传到七牛云,这样记在速度就会明显提升。
后台开发
后端使用的是lin-cms-koa框架
方法封装,我们安装qiniu插件,通过key和密钥换取token返回给前端,用于文件上...
yekong
3个月前 (08-11)
喜欢
后台开发过程中,需要实现一个图片上传功能,后台api接口我们使用的是lin-cms-koa.
接口封装
// 上传文件
export function uploadImg(file) {
const formData = new FormData();
formD...
yekong
3个月前 (08-11)
喜欢
数据可视化大屏 项目开发中,会添加动画来点缀页面,有些可以通过css来实现动画,有些图片序列帧动画,序列帧动画可以通过css+雪碧图的方式来实现,也可以通过js的方式来实现,今天是使用canvas+js来实现。
准备序列帧图片
我们首先需要准备序列帧图片,这里我们准备了75张序列...
yekong
5个月前 (07-02)
喜欢
需求
在Vue项目开发中,有时我们需要实现一个Tab菜单,当点击某个Tab时,该Tab能够自动居中显示。本文将介绍如何使用Vue和BetterScroll库实现这一功能。
动态效果
代码实现
以下是完整的代码实现,包括模板、脚本和样式部分。
模板部分
<template...
yekong
6个月前 (06-07)
喜欢
要在 Vue.js 项目中使用 Canvas 实现随机验证码,并进行对比验证,可以按照以下步骤进行:
创建一个 Canvas 组件:用于生成随机验证码。
在登录表单中引入 Canvas 组件:并实现点击刷新验证码的功能。
在登录逻辑中进行验证码的对比验证。
以下是具体的实现...
yekong
6个月前 (05-19)
喜欢
vue 数据可视化大屏 实现进度条效果,通过10种颜色图标实现进度条背景色。
使用组件
<template>
<div class="list">
<div class="titleBody"&g...
yekong
7个月前 (05-01)
喜欢
左侧为进度条和标题 右侧为相关数字以及文字说明。
进度条设置两层,底层为进度条底图,上层为进度条占比,通过数据计算div宽度来实现进度条占比,使用gsap补间动画 来实现进度条的动画,通过index来控制当前进度条的颜色。
动态效果
使用组件
<template>...
yekong
7个月前 (04-24)
喜欢
echarts项目开发中,需要显示雷达图,雷达图要求在刻度上显示内容,今天我们将实现方法记录下来。
echarts版本
"echarts": "^5.4.1",
首选在刻度上显示内容
我们只需要在radar下面增加axisLabel设...
yekong
7个月前 (04-20)
喜欢
vue3 数据可视化大屏 - 数据资产大屏 项目开发中, 需要下拉菜单选择内容,设计师对这个下拉菜单做了美化,在设计图中多余遇到不同样式的下拉菜单,每次都要重新写样式,很耗费时间,所以想着把可能会修改的关键代码都列出来,下次就可以针对性的修改,节省开发时间。
因为element-...
yekong
7个月前 (04-20)
喜欢