数据大屏项目开发过程中,会增加一些动画效果,让大屏页面看起来更加酷炫.今天我们来实现一个自上而下展开的动画效果.
效果截图
动态效果
实现思路
在上面的动画效果中,我们要实现的是自上而下的展开动画,动画执行完成后,再显示内容。
首先隐藏我们要显示的内容,然后再做一个div,给...
yekong
1年前 (2023-07-31)
喜欢
数字滚动效果
动画效果
在Vue.js中,可以使用countUp.js插件实现数字滚动。这是一个独立的,能让你创建动态递增或递减的数字动画的JavaScript库。
首先,你需要在项目中安装这个库:
npm install countup.js --save
然后,在你的组...
yekong
1年前 (2023-07-31)
喜欢
在ECharts中,如果横坐标的数据太多,你可以通过添加dataZoom组件来实现拖动效果,dataZoom组件提供了数据区域的缩放和平移交互功能,可以使用户在查看数据详情的同时,保持大局观。以下是一个基本的示例:
var option = {
// ...
da...
yekong
1年前 (2023-07-31)
喜欢
vue 数据可视化大屏 项目开发中经常会遇到各种各样的进度条效果,想来将来可能会遇到类似的效果就将对应的效果实例给记录下来。
如果您需要设计属于自己的 可视化数据大屏 可以联系我们微信:17331886870
21 vue 数据可视化大屏性别占比进度条
效果实例代码:vue 数据...
yekong
1年前 (2023-07-29)
喜欢
vue 数据可视化大屏项目开发中,会需要各种各样的进度条,占比进度条等效果,今天整理的是性别占比。
进度条分为标题 男生占比 男生数字 女生占比 女生数字 总数等。
效果截图
动态效果
动画效果描述
进度条依次自上而下翻转显示。
进度条从左向右展开
然后依次展示男性占比 女性...
yekong
1年前 (2023-07-29)
喜欢
在项目开发过程中,一般背景图片使用一个背景图就可以了,但是在实际项目开发中,会遇到各种情况,比如同一个组件需要在不同的宽高下使用,这时候如果复用同一个背景图那么图片就会变形。
多背景图拼接
在之前的项目开发中,遇到这种情况会使用vue 实现安卓.9图片类似的效果九宫格图片,这种类...
yekong
1年前 (2023-07-29)
喜欢
请求多个接口
对于每个type,你的代码中需要三次独立的异步请求(list_teacher,list_external,list_serve)。这些请求可以同时进行以节省时间。
使用map函数直接生成list,而不是用forEach循环和push。
这是优化后的代码:...
yekong
1年前 (2023-07-29)
喜欢
项目开发中,使用vue3的写法时,使用watch监听props没有触发接口请求
在 Vue 3 中,由于一些性能优化,watch 不会监听到 props 的变化。对于这种情况,可以使用 watchEffect 来替代 watch。下面是代码修改后的版本:
<script s...
yekong
1年前 (2023-07-28)
喜欢
watch 和 watchEffect 都是 Vue 3 提供的响应数据的变化的 API,但它们之间有一些关键的区别。
启动时的行为:watchEffect 在声明时会立即执行一次回调函数,而 watch 默认情况下则不会。你需要在 watch 的选项中设置 immediat...
yekong
1年前 (2023-07-28)
喜欢
数据可视化大屏项目开发工程中,对效果追求越来越高,之前我们实现的是:threejs 3d地图通过gsap实现从远到近的入场动画,今天要实现的效果是:地图标签要显示自定义图标,并且鼠标移入地图后,弹窗显示地图区域的内容。
threejs版本号
"three": "^0.154.0...
yekong
1年前 (2023-07-28)
喜欢