vue数据可视化大屏项目中,客户的数据大屏是投放到电视上的,不用操作,所以客户想每隔5秒请求一次接口刷新数据。
配置文件增加定时间隔
因为数据大屏项目中有很多接口,所以我们需要将定时间隔抽离出来,下次如果修改定时请求间隔或者不要定时请求了我们只需要修改配置文件就可以了。
我们在s...
yekong
1年前 (2023-09-29)
喜欢
要在 Vue 2 项目中使用 mockjs,你可以按照以下步骤进行:
安装 mockjs
使用 npm 或 yarn 安装 mockjs:
npm install mockjs --save-dev
或
yarn add mockjs --dev
创建一个 mock 数据文件...
yekong
1年前 (2023-09-18)
喜欢
数据可视化大屏项目开发过程中会在大屏顶部左侧或者右侧显示实时的日期时间,效果如下:
首先需要安装并配置dayjs库,并导入必要的插件以支持显示星期。接着,在Vue组件中设置一个定时器来实时更新时间。
安装 dayjs
npm install dayjs
配置 dayjs
在V...
yekong
1年前 (2023-09-17)
喜欢
wow.js npm 包被作者删除,我本地 node_modules 于是想着将其上传到git继续使用这个插件,上传到 GitHub 作为一个新的项目。但在这样做之前,你需要注意以下几点:
许可证: 确保你有权利重新发布该代码。检查原始代码中的 LICENSE 文件或其他许可...
yekong
1年前 (2023-09-13)
喜欢
vue项目需要在图片进行画框操作,用来进行重点标注,这里使用canvas来实现。
实现代码
<template>
<div class="test" style="background-color: burlywood; di...
yekong
1年前 (2023-09-09)
喜欢
由于geoJson获取的渠道不同,数据可能也有差异,有些geoJson数据没有center,这导致我们在渲染地图的时候,因为没有center导致地名加载的时候报错。
但是自己手动一个一个添加center点就太累人了,这里提供的方法是通过js对json数据进行循环处理,根据现有的数...
yekong
1年前 (2023-09-06)
喜欢
数据可视化大屏项目中,我们需要实现帧动画,实现方式有很多种,这里的方法是通过将序列帧图片转为雪碧图来实现,但是这里似乎有个问题就是不容易控制宽高。
将图片合成雪碧图并实现动画
将雪碧图拆解为序列帧图片
既然能序列帧图片转为雪碧图,我们也可能需要将序列帧做成的雪碧图重新转回到帧图片...
yekong
1年前 (2023-09-05)
喜欢
vue数据可视化大屏项目中,为了让数据大屏更加酷炫,会增加帧动画,在以前的项目中为了让是将帧动画转为雪碧图然后再使用的。今天反向操作一波,将雪碧图转为序列帧图片。
在线地址
将雪碧图拆解为序列帧图片
关键代码
这里通过选择图片然后输入序列帧图片的宽和高,输入序列帧图片的数量,然后...
yekong
1年前 (2023-09-05)
喜欢
使用import facilities from './data/facilities1.kml'时,会报错:
Failed to parse source for import analysis because the content contains invalid JS s...
yekong
1年前 (2023-09-01)
喜欢
在 Vue 3 中导出接口返回的数据为 Excel 文件可以通过多种方式实现。下面是其中一种常用的实现步骤:
安装依赖库:通常,你可能需要依赖如 xlsx 或者 file-saver 之类的第三方库。
npm install xlsx file-saver
引入依赖:在...
yekong
1年前 (2023-08-27)
喜欢