vue3数据可视化大屏-科技管理大屏是由vue3开发数据大屏项目。
ui设计稿
ui设计师提供数据大屏UI设计案例-安全服务驾驶舱 psd源文件
开发环境
vue3 + vite
nodejs v14
其他特点
页面随屏幕大小自适应
vue3数据可视化大屏-科技管理大屏案例演示
...
yekong
2年前 (2023-03-03)
喜欢
数据大屏UI设计案例安全服务驾驶舱UI设计稿展示。
UI设计 文件格式
PSD
数据大屏尺寸
1920*1080
前端实现
vue3+vite
演示地址:vue3数据可视化大屏-科技管理大屏案例演示
部分效果截图
数据大屏UI设计案例-安全服务驾驶舱部分效果截图
数据大屏UI设计...
yekong
2年前 (2023-03-03)
喜欢
vue数据可视化大屏 开发中,需要一个进度条的效果,这里使用的是两个图片来实现的,一个背景图,还有一个进度条背景图。然后增加一个长度限制,默认是0每10毫秒增加1直到增加到给定的百分比停止,形成一个渐变的动画。
更多进度条效果实例
vue 数据可视化大屏进度条效果实例
使用
&...
yekong
2年前 (2023-03-03)
喜欢
vue3 数据可视化大屏 项目中需要tab切换效果,之前写过类似的效果了,vue tab_line_sync 组件,不过是vue2的方式写的,vue3的sync已经不能用了,所以重新再写一遍。
使用
<template>
<div class="...
yekong
2年前 (2023-03-02)
喜欢
vue3 vue3数据大屏使用腾讯地图 要求可以自定义图标,图标点击后可以跳转,鼠标放在图标上显示自定义文字效果。
演示demo:vue3数据可视化大屏-科技管理大屏案例演示
实现代码
<template>
<div class="map wow...
yekong
2年前 (2023-03-02)
喜欢
vue数据大屏开发时,需要在腾讯地图上插入一个div,这里我们用js来实现,将实现过程记录下来
演示demo:vue3数据可视化大屏-科技管理大屏案例演示
实现代码
var mydom = document.createElement('div'); // 新建一个div...
yekong
2年前 (2023-03-02)
喜欢
vue3 数据大屏可视化 项目中要求使用腾讯地图,这里将自己实现的代码记录下来,方便复用。数据大屏可视化ui设计的地图很华丽,但是使用腾讯地图没办法实现这种样式效果。vue3使用腾讯地图添加自定义图标
演示demo:vue3数据可视化大屏-科技管理大屏案例演示
申请腾讯地图k...
yekong
2年前 (2023-03-02)
喜欢
vue3 数据可视化大屏 项目开发时,经常会遇到table效果,但是限于页面大小,table的数据并不能完全的显示出来,这就需要让table滚动起来,之前使用vue2已经实现过了类似的效果,vue table组件结合vue-seamless-scroll实现滚动,这次是使用的vu...
yekong
2年前 (2023-03-02)
喜欢
vue3实现鼠标拖动横向滚动,vue数据大屏开发,客户要求列表可以横向拖动,这里使用的better-scroll插件来实现自己想要的效果。
演示demo:vue3数据可视化大屏-科技管理大屏案例演示
/**
* @Author: 858834013@qq.com
* @Name...
yekong
2年前 (2023-03-01)
喜欢
js在操作div的时候,会需要清除指定div的内容
使用innerHTML
使用innerHTML清除指定div内容
document.getElementById("myDiv").innerHTML = "";
使用removeChi...
yekong
2年前 (2023-03-01)
喜欢