vue可视化数据大屏项目开发时,使用高德地图会遇到绘制区域边界的情况,这里我们可以使用AMap.DistrictSearch加AMap.Polygon来绘制边界。
首先需要配置安全密钥,引用高德地图
<script type="text/javascript&...
yekong
2年前 (2023-03-13)
喜欢
vue使用高德地图district.search查询地区的时候返回no_data,这是因为没有配置安全密钥的原因,配置一下安全密钥就可以了。
关键代码
<script type="text/javascript">
window._AMap...
yekong
2年前 (2023-03-13)
喜欢
vue3实现鼠标拖动横向滚动,vue数据大屏开发,客户要求列表可以横向拖动,这里使用的better-scroll插件来实现自己想要的效果。
演示demo:vue3数据可视化大屏-科技管理大屏案例演示
/**
* @Author: 858834013@qq.com
* @Name...
yekong
2年前 (2023-03-01)
喜欢
数据可视化大屏 项目中很多地方都需要数字展示,为了不让页面看起来单调,数字经常需要添加一些滚动的动画效果。这里使用的vue3之前的组件不好用了,所以从新找了一个在vue3环境下可以用的组件。
安装依赖
npm install vue3-number-roll-plus --sav...
yekong
2年前 (2023-02-21)
喜欢
Vue 提供了 transition 的封装组件,可以给任何元素和组件添加进入/离开过渡;我们可以结合animate.css来实现我们想要的效果。animate动画可实现的效果有很多,我们可以查看animate.css演示。
安装animate.css
npm install a...
yekong
2年前 (2023-02-09)
喜欢
vue数据大屏开发经常会遇到像下图一样要显示当前日期,有的项目只显示年月日,有的项目显示年月日时分秒,有的项目显示星期 年月日时分秒等,很多情况。今天介绍vue数据大屏添加日期和时间实现的方法。
效果演示
数据大屏日期和时间实时更新的效果演示
安装依赖
使用前需要先安装日期插件...
yekong
2年前 (2023-02-01)
喜欢
vue2项目升级为vue3后,发现一些地方不能正常运行了,其中有一项是使用.sync没办法正常赋值了。
查询相关说明得知Vue3中v-model取代了.sync,.sync不再被支持。
vue2下的sync
<tab :active.sync="active&qu...
yekong
2年前 (2023-01-31)
喜欢
在制作icomoon字体图标前,我们首先需要有svg格式的图标文件,之前有文章写过
导出psd文件内的小图标制作成字体图标
如果有了svg文件后,那么就可以继续了,打开工具icomoon
打开工具icomoon
工具地址:icomoon
上传svg文件到icomoon生成图标
点...
yekong
2年前 (2023-01-30)
喜欢
在做数据大屏开发时,或者vue后台项目开发时,设计给我们的数据大屏UI设计图经常会遇到类似这种菜单,但是图标是有多种颜色的,这里我们可以直接切出两套不同颜色的图片用来切换,但是也会遇到客户看到最终页面后又想调菜单图标的颜色的情况,这时候我们就需要再切一遍,怎么避免这种情况呢?
...
yekong
2年前 (2023-01-30)
喜欢
在vue数据大屏开发中,经常会出现为了装饰而有很多异形头部,比如vue数据大屏 采油厂风险管控系统这个项目,里面有很多异形头部图,就像下面的截图,长得很像但是长度又不一样的,当时为了切这些地方切出来好多个很相似但是宽度又不同的图片,页面稍微调整宽度,这些位置就会轻微变形。
所以...
yekong
2年前 (2023-01-30)
喜欢