vue 实现波浪柱状图效果实例，通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。
组件代码
/**
* @Author: 858834013@qq.com
* @Name: waterSpout
* @Date: 2023年03月27日
* @Desc: 水柱
...
yekong
2年前 (2023-03-28)
喜欢
vue 数据可视化大屏项目开发中，有一个类似echarts柱状图的效果实例，不过和柱状图有一些区别，所以使用的html+css+js的方式来写的。
效果要求
柱状图组件按照百分比占比来表示长度，为了避免数字占比小而无法装下数字，设置了一个最小宽度。
左下角有说明标签，标签点击后可...
yekong
2年前 (2023-03-22)
喜欢
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 数据大屏可视化 项目中要求使用腾讯地图，这里将自己实现的代码记录下来，方便复用。数据大屏可视化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)
喜欢
vue 数据可视化大屏 项目中要求列表可以自动滚动，之前使用的Vue2已经实现过了，vue 结合vue-seamless-scroll实现列表滚动，不过这个项目使用的是vue3+vite之前的组件可能无法使用，所以专门找了一个vue3的无缝滚动组件。
演示demo:vue3数据可...
yekong
2年前 (2023-03-01)
喜欢
数据可视化大屏 项目中很多地方都需要数字展示，为了不让页面看起来单调，数字经常需要添加一些滚动的动画效果。这里使用的vue3之前的组件不好用了，所以从新找了一个在vue3环境下可以用的组件。
安装依赖
npm install vue3-number-roll-plus --sav...
yekong
2年前 (2023-02-21)
喜欢
在vue数据大屏开发中，经常会出现为了装饰而有很多异形头部，比如vue数据大屏 采油厂风险管控系统这个项目，里面有很多异形头部图，就像下面的截图，长得很像但是长度又不一样的，当时为了切这些地方切出来好多个很相似但是宽度又不同的图片，页面稍微调整宽度，这些位置就会轻微变形。
通过将...
yekong
2年前 (2023-01-31)
喜欢
