分类:vue组件

vue组件

element-plus 使用实例汇总

element-plus 使用实例汇总
element-plus在使用的时候,一般并不能直接满足我们的需要,还需要二次调整,比如修改ui组件的样式或者功能调整,这里将这些调整整理出来,方便查找。 说明文档 文档常用的有两个,有时候会无法访问,所以两个都整理出来了。 element-plus element-plus 国...

yekong 11个月前 (04-19) 635℃ 0喜欢

vue3 高德地图实现热力图效果实例

vue3 高德地图实现热力图效果实例
vue3 数据可视化大屏 - 数据资产大屏 项目开发中,需要高德地图渲染热力图效果。我们可以通过AMap.Heatmap 初始化热力图,并且可以设置半径以及透明度。通过heatmap.setDataSet来设置热力图的坐标以及数值。 var heatmap = new AMap....

yekong 11个月前 (04-19) 735℃ 0喜欢

vue3 高德地图边框效果实例

vue3 高德地图边框效果实例
vue3 数据可视化大屏项目开发中,为了美观在渲染地图时,会给地图添加一个边框效果,今天整理的是高德地图边框效果实例。 实现方法 给地图添加一个div遮罩,通过css给这个遮罩添加一个内阴影效果。box-shadow: inset 0px 0px 32px 0px rgba(68...

yekong 11个月前 (04-18) 548℃ 0喜欢

vue3 高德地图自定义图标和弹窗

vue3 高德地图自定义图标和弹窗
vue3 数据可视化大屏 开发中,有个要求,需要显示自定义图标,并且可以点击实现弹窗,可以通过筛选框来实现图标筛选。 演示实例 引入高德地图 <script type="text/javascript" src="h...

yekong 12个月前 (04-18) 389℃ 0喜欢

vue3 高德地图实现测距

vue3 高德地图实现测距
vue3 数据可视化大屏 开发中,有个要求,地图要可以实现测距,搜索了一下高德地图支持这个功能,将实现方法记录一下。 演示实例 引入高德地图 <script type="text/javascript" src="h...

yekong 12个月前 (04-18) 511℃ 0喜欢

数据可视化大屏渐变色进度条数字居右

数据可视化大屏渐变色进度条数字居右
进度条效果: 进度条颜色是渐变色,可以通过传值自定义 进度条带有动画效果 使用gsap实现补间动画 进度条有默认背景色 进度条宽度根据总数和当前数据计算百分比 数字居右展示 演示地址 使用组件 <template> <div class="li...

yekong 12个月前 (04-17) 516℃ 0喜欢

vue3 表格自定义排行榜样式效果

vue3 表格自定义排行榜样式效果
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理 vue3 表格自定义排行榜样式效果组件。 通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动,使用自定义样式来实现排名表格效果。 演示地址 使用组件 <template>...

yekong 12个月前 (04-17) 846℃ 0喜欢

vue3 带排名效果的滚动表格组件

vue3 带排名效果的滚动表格组件
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理 vue3 带排名效果的滚动表格组件。 通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动,使用自定义图标来实现排名表格效果。 演示地址 使用组件 <template> ...

yekong 12个月前 (04-17) 802℃ 0喜欢

vue3 滚动表格效果

vue3 滚动表格效果
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理滚动表格效果。 通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动. 演示地址 使用组件 <template> <div class="itemBody...

yekong 12个月前 (04-17) 500℃ 0喜欢

vue3 渐变色背景滚动表格效果

vue3 渐变色背景滚动表格效果
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理渐变色背景滚动表格效果。 这里表格背景我们使用相对定位的方式将背景模块放在表格后面。来达到渐变背景色的效果。 演示地址 使用组件 <template> <div class="it...

yekong 12个月前 (04-17) 463℃ 0喜欢

vue3 数据可视化大屏边框组件-渐变色加两个底角效果

vue3 数据可视化大屏边框组件-渐变色加两个底角效果
数据可视化大屏 项目开发中经常会需要各种各样的边框,为了方便复用可能会出现的类似边框,这里将可能会遇到的 数据可视化大屏边框组件 都整理出来,今天整理的是渐变色加两个底角效果。 效果截图 演示地址: vue3 数据可视化大屏边框组件-渐变色加两个底角效果 组件代码 <te...

yekong 12个月前 (04-15) 541℃ 0喜欢

vue3 数据可视化大屏边框组件-四角边框

vue3 数据可视化大屏边框组件-四角边框
数据可视化大屏 项目开发中经常会需要各种各样的边框,为了方便复用可能会出现的类似边框,这里将可能会遇到的 数据可视化大屏边框组件 都整理出来,今天整理的是四角边框效果。 效果截图 演示地址: vue3 数据可视化大屏边框组件-四角边框 组件代码 <template>...

yekong 12个月前 (04-15) 695℃ 0喜欢

vue3 环形底座效果实例

vue3 环形底座效果实例
vue3 可视化数据大屏项目开发中,数据大屏ui界面会设置一些底座效果用来衬托数据,今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。 组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。 演示地址 vue3 底座效果实例 项目应...

yekong 1年前 (2023-04-03) 535℃ 0喜欢

vue3 element-plus Menu使用

vue3 element-plus Menu使用
element-plus Menu在使用的时候,我们需要点击菜单后跳转到对应的路由页面,并且默认展开当前路由所在的分组,以及记过当前所在的菜单 element-plus menu说明文档 激活路由模式 将:router="true"后,点击菜单就可以实现路由...

yekong 1年前 (2023-04-01) 1344℃ 0喜欢

vue 实现带波浪的柱状图效果实例

vue 实现带波浪的柱状图效果实例
vue 实现波浪柱状图效果实例,通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。 组件代码 /** * @Author: 858834013@qq.com * @Name: waterSpout * @Date: 2023年03月27日 * @Desc: 水柱 ...

yekong 1年前 (2023-03-28) 536℃ 0喜欢

vue html仿echarts柱状图效果实例

vue html仿echarts柱状图效果实例
vue 数据可视化大屏项目开发中,有一个类似echarts柱状图的效果实例,不过和柱状图有一些区别,所以使用的html+css+js的方式来写的。 效果要求 柱状图组件按照百分比占比来表示长度,为了避免数字占比小而无法装下数字,设置了一个最小宽度。 左下角有说明标签,标签点击后可...

yekong 1年前 (2023-03-22) 490℃ 0喜欢

vue 实现进度条效果

vue 实现进度条效果
vue数据可视化大屏 开发中,需要一个进度条的效果,这里使用的是两个图片来实现的,一个背景图,还有一个进度条背景图。然后增加一个长度限制,默认是0每10毫秒增加1直到增加到给定的百分比停止,形成一个渐变的动画。 更多进度条效果实例 vue 数据可视化大屏进度条效果实例 使用 &...

yekong 1年前 (2023-03-03) 515℃ 0喜欢

vue3 实现tab切换样式组件

vue3 实现tab切换样式组件
vue3 数据可视化大屏 项目中需要tab切换效果,之前写过类似的效果了,vue tab_line_sync 组件,不过是vue2的方式写的,vue3的sync已经不能用了,所以重新再写一遍。 使用 <template> <div class="...

yekong 1年前 (2023-03-02) 787℃ 0喜欢

vue3 项目使用腾讯地图

vue3 项目使用腾讯地图
vue3 数据大屏可视化 项目中要求使用腾讯地图,这里将自己实现的代码记录下来,方便复用。数据大屏可视化ui设计的地图很华丽,但是使用腾讯地图没办法实现这种样式效果。vue3使用腾讯地图添加自定义图标 演示demo:vue3数据可视化大屏-科技管理大屏案例演示 申请腾讯地图k...

yekong 1年前 (2023-03-02) 1239℃ 0喜欢

vue3 table结合vue3-seamless-scroll实现滚动动画

vue3 table结合vue3-seamless-scroll实现滚动动画
vue3 数据可视化大屏 项目开发时,经常会遇到table效果,但是限于页面大小,table的数据并不能完全的显示出来,这就需要让table滚动起来,之前使用vue2已经实现过了类似的效果,vue table组件结合vue-seamless-scroll实现滚动,这次是使用的vu...

yekong 1年前 (2023-03-02) 798℃ 0喜欢