vue 数据可视化大屏 项目开发中经常会遇到各种各样的进度条效果，想来将来可能会遇到类似的效果就将对应的效果实例给记录下来。
如果您需要设计属于自己的数据可视化大屏 可以联系我们微信：17331886870
进度条效果1
进度条效果：
进度条颜色是渐变色，可以通过传值自定义
进度...
yekong
12小时前 13℃
0喜欢
进度条效果：
进度条颜色是渐变色，可以通过传值自定义
进度条带有动画效果 使用gsap实现补间动画
进度条有最大宽度，给右侧留有展示数据的空间
进度条有默认背景色
进度条宽度根据总数和当前数据计算百分比
使用组件
<progressBar class="wow ...
yekong
12小时前 11℃
0喜欢
vue3 vite 数据可视化大屏 项目开发中需要和后端进行数据交互，这需要后端开发人员提供接口文档，前端开发人员根据接口文档进行接口调用。
安装依赖
要请求接口数据我们需要插件，这里我们使用axios来请求接口
使用pnpm来安装依赖
pnpm i axios
使用axios...
yekong
17小时前 12℃
0喜欢
vue vite项目中引入glsl文件后会报错Unexpected identifier 'vec2'，我们需要配置一下vite-plugin-glsl。
安装依赖
pnpm i vite-plugin-glsl
编辑vite.config.js文件
import {defin...
yekong
2天前 13℃
0喜欢
vue 数据可视化大屏项目开发中，有一个类似echarts柱状图的效果实例，不过和柱状图有一些区别，所以使用的html+css+js的方式来写的。
效果要求
柱状图组件按照百分比占比来表示长度，为了避免数字占比小而无法装下数字，设置了一个最小宽度。
左下角有说明标签，标签点击后可...
yekong
5天前 31℃
0喜欢
vue数据可视化大屏项目中，需要一些动画元素让页面更生动，这里将gsap上下浮动的动画效果记录下来，方便可能复用。
<template>
<div class="titleBg">
<div class="...
yekong
1周前 (03-18) 40℃
0喜欢
axios上传文件的时候，如果文件太大的话，就需要添加一个上传进度了解上传情况，所以我们添加一个进度提示，axios上传进度是通过onUploadProgress来获取的。
html
<el-dialog
title="上传文件到内部存储或SD卡1"...
yekong
2周前 (03-16) 66℃
0喜欢
vue3 vite项目进行接口调用的时候，会遇到跨域的问题，这时候就需要配置反向代理了。
vite 反向代理说明文档
反向代理说明文档
vite 反向代理配置代码
import {defineConfig} from 'vite';
import vue from '@vitej...
yekong
2周前 (03-15) 54℃
0喜欢
数据可视化大屏 项目开发中，会添加动画来点缀页面，有些可以通过css来实现动画，有些图片序列帧动画，序列帧动画可以通过css+雪碧图的方式来实现，也可以通过js的方式来实现，今天是使用canvas+js来实现。
组件使用
<sequence :file-length=&qu...
yekong
2周前 (03-14) 58℃
0喜欢
可视化大屏项目开发中，有一个需求高德地图上要覆盖一个自定义的地图图片，这个要和区域轮廓一致，但是当地图缩放的时候就会导致图片和轮廓不一致，这时候就需要监听地图的zoom了，当地图zoom和默认不一样的时候就隐藏这个图片。
that.map.on('zoomchange', ()...
yekong
2周前 (03-13) 47℃
0喜欢
