位置: IT常识 - 正文

vue3 | 数据可视化实现数字滚动特效(vue数据可视化大屏布局)

编辑:rootadmin
vue3 | 数据可视化实现数字滚动特效 前言

推荐整理分享vue3 | 数据可视化实现数字滚动特效(vue数据可视化大屏布局),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue可视化创建项目,vue cli可视化,vue cli可视化,vue实现数据可视化,vue可视化创建项目,vue数据可视化大屏布局,vue数据可视化大屏布局,vue实现数据可视化,内容如对您有帮助,希望把文章链接给更多的朋友!

vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错: TypeError: Cannot read properties of undefined (reading '_c') 的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

思路

使用Vue.component定义公共组件,使用window.requestAnimationFrame(首选,次选setTimeout)来循环数字动画,window.cancelAnimationFrame取消数字动画效果,封装一个requestAnimationFrame.js公共文件,CountTo.vue组件,入口导出文件index.js。

文件目录

使用示例<CountTo :start="0" // 从数字多少开始 :end="endCount" // 到数字多少结束 :autoPlay="true" // 自动播放 :duration="3000" // 过渡时间 prefix="¥" // 前缀符号 suffix="rmb" // 后缀符号 />入口文件index.jsconst UILib = { install(Vue) { Vue.component('CountTo', CountTo) }}export default UILibmain.js使用import CountTo from './components/count-to/index';app.use(CountTo)requestAnimationFrame.js思路先判断是不是浏览器还是其他环境如果是浏览器判断浏览器内核类型如果浏览器不支持requestAnimationFrame,cancelAnimationFrame方法,改写setTimeout定时器导出两个方法 requestAnimationFrame, cancelAnimationFrame各个浏览器前缀:let prefixes = 'webkit moz ms o';判断是不是浏览器:let isServe = typeof window == 'undefined';增加各个浏览器前缀: let prefix;let requestAnimationFrame;let cancelAnimationFrame;// 通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式 for (let i = 0; i < prefixes.length; i++) { if (requestAnimationFrame && cancelAnimationFrame) { break } prefix = prefixes[i] requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'] cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame'] } //不支持使用setTimeout方式替换:模拟60帧的效果 // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame,则会退到setTimeout if (!requestAnimationFrame || !cancelAnimationFrame) { requestAnimationFrame = function (callback) { const currTime = new Date().getTime() // 为了使setTimteout的尽可能的接近每秒60帧的效果 const timeToCall = Math.max(0, 16 - (currTime - lastTime)) const id = window.setTimeout(() => { callback(currTime + timeToCall) }, timeToCall) lastTime = currTime + timeToCall return id } cancelAnimationFrame = function (id) { window.clearTimeout(id) } }完整代码:

requestAnimationFrame.js

let lastTime = 0const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀let requestAnimationFramelet cancelAnimationFrame// 判断是否是服务器环境const isServer = typeof window === 'undefined'if (isServer) { requestAnimationFrame = function () { return } cancelAnimationFrame = function () { return }} else { requestAnimationFrame = window.requestAnimationFrame cancelAnimationFrame = window.cancelAnimationFrame let prefix // 通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式 for (let i = 0; i < prefixes.length; i++) { if (requestAnimationFrame && cancelAnimationFrame) { break } prefix = prefixes[i] requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'] cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame'] } // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame,则会退到setTimeout if (!requestAnimationFrame || !cancelAnimationFrame) { requestAnimationFrame = function (callback) { const currTime = new Date().getTime() // 为了使setTimteout的尽可能的接近每秒60帧的效果 const timeToCall = Math.max(0, 16 - (currTime - lastTime)) const id = window.setTimeout(() => { callback(currTime + timeToCall) }, timeToCall) lastTime = currTime + timeToCall return id } cancelAnimationFrame = function (id) { window.clearTimeout(id) } }}export { requestAnimationFrame, cancelAnimationFrame }CountTo.vue组件思路vue3 | 数据可视化实现数字滚动特效(vue数据可视化大屏布局)

首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数,还需要格式化数字,进行正则表达式转换,返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'

需要接受的参数:

const props = defineProps({ start: { type: Number, required: false, default: 0 }, end: { type: Number, required: false, default: 0 }, duration: { type: Number, required: false, default: 5000 }, autoPlay: { type: Boolean, required: false, default: true }, decimals: { type: Number, required: false, default: 0, validator (value) { return value >= 0 } }, decimal: { type: String, required: false, default: '.' }, separator: { type: String, required: false, default: ',' }, prefix: { type: String, required: false, default: '' }, suffix: { type: String, required: false, default: '' }, useEasing: { type: Boolean, required: false, default: true }, easingFn: { type: Function, default(t, b, c, d) { return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; } }})

启动数字动效

const startCount = () => { state.localStart = props.start state.startTime = null state.localDuration = props.duration state.paused = false state.rAF = requestAnimationFrame(count)}

核心函数,对数字进行转动

if (!state.startTime) state.startTime = timestamp state.timestamp = timestamp const progress = timestamp - state.startTime state.remaining = state.localDuration - progress // 是否使用速度变化曲线 if (props.useEasing) { if (stopCount.value) { state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration) } else { state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration) } } else { if (stopCount.value) { state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration)) } else { state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration) } } if (stopCount.value) { state.printVal = state.printVal < props.end ? props.end : state.printVal } else { state.printVal = state.printVal > props.end ? props.end : state.printVal } state.displayValue = formatNumber(state.printVal) if (progress < state.localDuration) { state.rAF = requestAnimationFrame(count) } else { emits('callback') }}// 格式化数据,返回想要展示的数据格式const formatNumber = (val) => { val = val.toFixed(props.default) val += '' const x = val.split('.') let x1 = x[0] const x2 = x.length > 1 ? props.decimal + x[1] : '' const rgx = /(\d+)(\d{3})/ if (props.separator && !isNumber(props.separator)) { while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + props.separator + '$2') } } return props.prefix + x1 + x2 + props.suffix}

取消动效

// 组件销毁时取消动画onUnmounted(() => { cancelAnimationFrame(state.rAF)})

完整代码

<template> {{ state.displayValue }}</template><script setup> // vue3.2新的语法糖, 编写代码更加简洁高效import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";import { watch, computed } from 'vue';import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'// 定义父组件传递的参数const props = defineProps({ start: { type: Number, required: false, default: 0 }, end: { type: Number, required: false, default: 0 }, duration: { type: Number, required: false, default: 5000 }, autoPlay: { type: Boolean, required: false, default: true }, decimals: { type: Number, required: false, default: 0, validator (value) { return value >= 0 } }, decimal: { type: String, required: false, default: '.' }, separator: { type: String, required: false, default: ',' }, prefix: { type: String, required: false, default: '' }, suffix: { type: String, required: false, default: '' }, useEasing: { type: Boolean, required: false, default: true }, easingFn: { type: Function, default(t, b, c, d) { return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; } }})const isNumber = (val) => { return !isNaN(parseFloat(val))}// 格式化数据,返回想要展示的数据格式const formatNumber = (val) => { val = val.toFixed(props.default) val += '' const x = val.split('.') let x1 = x[0] const x2 = x.length > 1 ? props.decimal + x[1] : '' const rgx = /(\d+)(\d{3})/ if (props.separator && !isNumber(props.separator)) { while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + props.separator + '$2') } } return props.prefix + x1 + x2 + props.suffix}// 相当于vue2中的data中所定义的变量部分const state = reactive({ localStart: props.start, displayValue: formatNumber(props.start), printVal: null, paused: false, localDuration: props.duration, startTime: null, timestamp: null, remaining: null, rAF: null})// 定义一个计算属性,当开始数字大于结束数字时返回trueconst stopCount = computed(() => { return props.start > props.end})// 定义父组件的自定义事件,子组件以触发父组件的自定义事件const emits = defineEmits(['onMountedcallback', 'callback'])const startCount = () => { state.localStart = props.start state.startTime = null state.localDuration = props.duration state.paused = false state.rAF = requestAnimationFrame(count)}watch(() => props.start, () => { if (props.autoPlay) { startCount() }})watch(() => props.end, () => { if (props.autoPlay) { startCount() }})// dom挂在完成后执行一些操作onMounted(() => { if (props.autoPlay) { startCount() } emits('onMountedcallback')})// 暂停计数const pause = () => { cancelAnimationFrame(state.rAF)}// 恢复计数const resume = () => { state.startTime = null state.localDuration = +state.remaining state.localStart = +state.printVal requestAnimationFrame(count)}const pauseResume = () => { if (state.paused) { resume() state.paused = false } else { pause() state.paused = true }}const reset = () => { state.startTime = null cancelAnimationFrame(state.rAF) state.displayValue = formatNumber(props.start)}const count = (timestamp) => { if (!state.startTime) state.startTime = timestamp state.timestamp = timestamp const progress = timestamp - state.startTime state.remaining = state.localDuration - progress // 是否使用速度变化曲线 if (props.useEasing) { if (stopCount.value) { state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration) } else { state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration) } } else { if (stopCount.value) { state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration)) } else { state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration) } } if (stopCount.value) { state.printVal = state.printVal < props.end ? props.end : state.printVal } else { state.printVal = state.printVal > props.end ? props.end : state.printVal } state.displayValue = formatNumber(state.printVal) if (progress < state.localDuration) { state.rAF = requestAnimationFrame(count) } else { emits('callback') }}// 组件销毁时取消动画onUnmounted(() => { cancelAnimationFrame(state.rAF)})</script>总结

自己封装数字动态效果需要注意各个浏览器直接的差异,手动pollyfill,暴露出去的props参数需要有默认值,数据的格式化可以才有正则表达式的方式,组件的驱动必须是数据变化,根据数据来驱动页面渲染,防止页面出现卡顿,不要强行操作dom,引入的组件可以全局配置,后续组件可以服用,码字不易,请各位看官大佬多多支持,一键三连了~❤️❤️❤️

demo演示

后续的线上demo演示会放在 demo演示 完整代码会放在 个人主页

希望对vue开发者有所帮助~

个人简介:承吾工作年限:5年前端地区:上海个人宣言:立志出好文,传播我所会的,有好东西就及时与大家共享!
本文链接地址:https://www.jiuchutong.com/zhishi/299054.html 转载请保留说明!

上一篇:2023年前端开发趋势未来可期(2023年前端开发找工作好找吗)

下一篇:如何通过nodejs快速搭建一个服务器(nodejs如何使用)

  • 麦克维尔风机盘管样本(麦克维尔风机盘管)(麦克维尔风机盘管型号)

    麦克维尔风机盘管样本(麦克维尔风机盘管)(麦克维尔风机盘管型号)

  • 一加7pro能透视吗(一加七拍照透视)

    一加7pro能透视吗(一加七拍照透视)

  • 微信怎么清内存(微信怎么清内存不小心)

    微信怎么清内存(微信怎么清内存不小心)

  • 小度1c二维码怎么找(小度的二维码怎么走)

    小度1c二维码怎么找(小度的二维码怎么走)

  • 为什么摄像头老是显示离线状态(为什么摄像头老是显示网络异常)

    为什么摄像头老是显示离线状态(为什么摄像头老是显示网络异常)

  • 华为手机删除的照片咋恢复(华为手机删除的app哪里可以找回)

    华为手机删除的照片咋恢复(华为手机删除的app哪里可以找回)

  • oppo账号被别人实名认证了(oppo账号被别人登录了,会看到我手机里的应用么)

    oppo账号被别人实名认证了(oppo账号被别人登录了,会看到我手机里的应用么)

  • 微视同步朋友圈为什么别人看不到

    微视同步朋友圈为什么别人看不到

  • 拼多多直播不小心点开了,可以删除吗(拼多多直播不小心点了举报,怎么撤回)

    拼多多直播不小心点开了,可以删除吗(拼多多直播不小心点了举报,怎么撤回)

  • 天猫意外保修包括什么(天猫意外保修包怎么用)

    天猫意外保修包括什么(天猫意外保修包怎么用)

  • opporeno微信深色模式怎么设置(oppoa1微信深色模式)

    opporeno微信深色模式怎么设置(oppoa1微信深色模式)

  • 局域网ping不通网关(局域网ping不通ip地址的原因)

    局域网ping不通网关(局域网ping不通ip地址的原因)

  • 华为手机的截屏怎么截屏(华为手机的截屏设置在哪里)

    华为手机的截屏怎么截屏(华为手机的截屏设置在哪里)

  • ios13微信提示音怎么改(iphone13微信通知声音太小)

    ios13微信提示音怎么改(iphone13微信通知声音太小)

  • 苹果手机微信接龙怎么换行对齐(苹果手机微信接听视频还要解锁)

    苹果手机微信接龙怎么换行对齐(苹果手机微信接听视频还要解锁)

  • wps2019清除格式在哪(wps2019如何清除格式)

    wps2019清除格式在哪(wps2019如何清除格式)

  • 数据灾备有哪些功能(数据灾备 rpo)

    数据灾备有哪些功能(数据灾备 rpo)

  • 苹果xs尺寸(苹果xsmax尺寸)

    苹果xs尺寸(苹果xsmax尺寸)

  • 苹果手表蜂窝怎么开通(苹果手表蜂窝的功能)

    苹果手表蜂窝怎么开通(苹果手表蜂窝的功能)

  • 为什么长图发朋友圈会模糊(很长的图发到朋友圈为什么糊了)

    为什么长图发朋友圈会模糊(很长的图发到朋友圈为什么糊了)

  • 锁屏声音在哪设置(锁屏声音在哪设置oppo)

    锁屏声音在哪设置(锁屏声音在哪设置oppo)

  • 苹果电脑开机声音关闭教程(苹果电脑开机声音怎么关)

    苹果电脑开机声音关闭教程(苹果电脑开机声音怎么关)

  • Linux下socket实现网页抓取  Unicorn  博客频道  CSDN.NET

    Linux下socket实现网页抓取 Unicorn 博客频道 CSDN.NET

  • vue3+ts+MicroApp实战教程

    vue3+ts+MicroApp实战教程

  • 待认证进项税额和待抵扣进项税额的区别
  • 分公司非独立核算
  • 财务软件使用制度
  • 增值税纳税义务发生时间的规定
  • 什么是纳税义务人,在理解这一观念时应注意哪些问题
  • 个人独资企业需要交什么税
  • 免征增值税和增值税区别
  • 专票小数点没打印齐能用吗
  • 出差会议纪要模板
  • 入账成本会计分录
  • 上年城市维护建设税退税怎么记账
  • 台港澳与境内合资企业和央企哪个好
  • 可以抵扣的税控发票
  • 子母公司有连带责任吗
  • 管理费用会计科目代码是多少
  • 转让技术所得收入怎么计算增值税
  • 外贸企业出口采购流程
  • 外贸企业仍一箱难求
  • 企业将自用设备进行出租
  • 个人户转账公户用途
  • 奖励积分换取商品会计处理
  • 购进租赁设备分录
  • 小规模企业可以开电子专用发票吗
  • 这些常用的发票知识,你都知道了吗?
  • 房屋贷款基准利率表 历年查询
  • 经营性现金净流量是什么意思
  • 在卖场当中常见的问题
  • 个人可以做代理吗
  • 社保跨省转移社保流程
  • win10开机选择系统%1
  • 购买原材料折扣做什么会计科目
  • mac教程视频
  • 普通发票主营业务收入销项负数发票怎么做账
  • 价值高的备件算固定资产吗
  • 企业类型变更是什么意思
  • 公司交纳社会保险多少钱
  • 员工出差机票计入什么科目
  • 葡萄牙海岸风光
  • 股权融资服务协议
  • 30岁之后去面试
  • /f命令
  • 增值税直接减免税额要交企业所得税吗
  • 产权转移书据是什么印花税
  • 建筑劳保费返还政策
  • 个人所得税银行卡未实名认证是什么意思
  • 增值税发票超过3个月可以作废吗
  • 进项发票抵扣税率
  • 销售费用福利费和管理费用福利费
  • 土地使用税计入管理费用还是税金及附加
  • 企业不计提固定资产损失
  • 增值税发票怎么领取
  • 政府扶持国有企业
  • 企业所得税计算题及答案解析
  • 异地预缴的企业所得税
  • 水电费 会计
  • 什么叫查账征收和核定征收
  • 营改增后土地出让增值税
  • 已抵扣进项怎么转出
  • 非同一控制下企业合并,企业合并成本包括
  • 投资性房地产处置的账务处理
  • mysql三种安装方式
  • winxp启动
  • 苹果mac外接显示器合上盖子怎么在显示器上继续
  • 64位windows8系统安装驱动时出现签名错误的解决方法
  • mac的100个必备小技巧
  • win10h2版本
  • jquery延时器
  • 关于javascript中数组的说法不正确
  • jquery crud
  • shell中的注释用什么表示
  • 世界坐标转换成屏幕坐标
  • nodejs cli
  • android应用市场有哪些
  • 常州国家税务局待遇
  • 江苏税务查询授权验证码
  • 任何基金都可以转让吗
  • 国税网站怎么登录进入
  • 积极配合税务局工作
  • 税收政策对中小微企业的影响数据公式
  • 2022年太原医保缴费时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设