边框由标题和主体两部分组成。边框为内阴影加边线和背景色实现。
右上 左下 右下 三个角由图片进行装饰。
标题分为四部分
标题开始的向下弧形 标题底部的横向 标题末尾的向上弧形 以及装饰线条组成。
组件处理
组件每个部位都尽可能的精细化处理,让其尽可能的适配不同宽高而不错位变形。...
yekong
1年前 (2023-07-14)
喜欢
vue3 数据可视化大屏 组件效果,由多个六边形组成的六边形组效果。为了让六边形组不是那么死板,这里还增加了一点动画效果。
小六边形内包含了百分比以及数字标题内容。
组件以1 2 3 2 1的方式堆叠组成。
静态效果
动态效果
组件代码
<template>
...
yekong
1年前 (2023-07-14)
喜欢
vue 数据可视化大屏 项目中,按照效果图,需要实现一组气泡效果,气泡内有数字以及标题。
这里我们需要实现这里出气泡的大小,位置以及气泡的颜色等信息。将气泡渲染出来后,为了让页面看起来更生动,我们使用gsap来给组件添加一个上下轻微晃动的效果。
效果截图
效果动画
组件代码
...
yekong
1年前 (2023-07-14)
喜欢
vue 数据可视化大屏 开发中,需要实现横向滚动的效果,除了可以使用鼠标拖动滚动外,还需要可以通过点击按钮实现左右滚动。
效果截图
动态效果
实现代码
/**
* @Author: 858834013@qq.com
* @Name: scrollbar
* @Date: 20...
yekong
1年前 (2023-07-14)
喜欢
vue 数据可视化大屏 项目开发中,需要显示排行榜效果,比如top5 top10 之类的,为了丰富大屏的样式,会需要各种不同样式的排行效果,这里整理出了项目开发中遇到的效果。
3 排行榜效果实例 - 圆形排行标注效果
实例描述 排行分为4种颜色 前三种分别 红 黄 绿 三种颜色,...
yekong
1年前 (2023-07-12)
喜欢
数据可视化大屏项目开发工程中,echarts图表需要实现配置一批颜色,但是后端返回的数据可能会超过前端配置的颜色,这时候我们就需要生成一批随机颜色了。
在JavaScript中,你可以使用以下方法生成随机颜色:
方法一:生成随机的RGB颜色值
function getRandom...
yekong
1年前 (2023-07-11)
喜欢
在Adobe Photoshop中,你可以将一个图层上的效果复制到其他图层上,以在多个图层上应用相同的效果。以下是一种常用的方法:
在图层面板中,选择包含你想要复制效果的源图层。
在菜单栏中选择"图层(Layer)",然后选择"样式(Lay...
yekong
1年前 (2023-07-11)
喜欢
微信小程序开发过程中,因为微信版本过低,某些功能不能使用,需要对微信版本进行判断,当微信版本低于某个版本的时候,需要进行提示,告诉用户让用户升级微信app。
判断代码
getVersion() {
var that = this;
// 判断版本
that.version ...
yekong
1年前 (2023-07-10)
喜欢
效果截图
效果动画
要在CSS中实现PNG图片的动态切换效果,你可以使用CSS动画和背景图像切换的技术。下面是一种常见的实现方法:
HTML结构:
<div class="image-container"></div>
CSS样式...
yekong
1年前 (2023-07-10)
喜欢
vue echarts 调试的时候正常运行,打包后却无法正常显示报错了。
TypeError: Cannot set properties of undefined (setting ‘colorStops‘)
问题代码:
areaColor: echarts.graphic....
yekong
1年前 (2023-07-09)
喜欢