数据可视化大屏 项目开发中,会添加动画来点缀页面,有些可以通过css来实现动画,有些图片序列帧动画,序列帧动画可以通过css+雪碧图的方式来实现,也可以通过js的方式来实现,今天是使用canvas+js来实现。
准备序列帧图片
我们首先需要准备序列帧图片,这里我们准备了75张序列...
yekong
5个月前 (07-02)
喜欢
数据可视化大屏 开发中,需要显示各种各样效果的柱状图,今天整理的是 颜色渐变异形柱状图
echarts 柱状图颜色渐变
显示单位,
显示虚线网格
限制字符长度换行
使用pictorialBar实现异形柱状图
echarts版本
"echarts": &quo...
yekong
9个月前 (02-25)
喜欢
vue 实现波浪柱状图效果实例,通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。
组件代码
/**
* @Author: 858834013@qq.com
* @Name: waterSpout
* @Date: 2023年03月27日
* @Desc: 水柱
...
yekong
2年前 (2023-03-28)
喜欢
最近一个项目要求做一个圆柱,顶部要有波浪效果,试了几种效果最后选择了css3 实现波浪效果实例,通过使用svg加css方式来实现。
通过linearGradient实现svg渐变色
<linearGradient id="gradient-test"&...
yekong
2年前 (2023-03-28)
喜欢
vue数据可视化大屏项目中,需要一些动画元素让页面更生动,这里将gsap上下浮动的动画效果记录下来,方便可能复用。
<template>
<div class="titleBg">
<div class="...
yekong
2年前 (2023-03-18)
喜欢