vue 数据大屏项目开发中，需要一个switch开关，element ui有类似的效果，不过和设计图的样式还是有差异的，所以就想着自己写一个，这里面的动画我们用的是gsap补间动画。
实现思路
我们首先通过css实现按钮样式，然后给按钮添加点击事件来改变状态，通过状态的变化来...
yekong
12个月前 (05-05) 439℃
0喜欢
vue3 数据可视化大屏 - 数据资产大屏 项目开发中， 需要下拉菜单选择内容，设计师对这个下拉菜单做了美化，在设计图中多余遇到不同样式的下拉菜单，每次都要重新写样式，很耗费时间，所以想着把可能会修改的关键代码都列出来，下次就可以针对性的修改,节省开发时间。
因为element-...
yekong
12个月前 (05-03) 1236℃
0喜欢
vue 数据可视化大屏 实现进度条效果，通过10种颜色图标实现进度条背景色。
演示地址
使用组件
<template>
<div class="list">
<div class="titleBody&q...
yekong
12个月前 (04-28) 495℃
0喜欢
vue 数据可视化大屏 实现进度条效果，效果通过颜色实现渐变色进度条。
演示地址
使用组件
<template>
<div class="cardBody">
<div class="cardBodyLi...
yekong
12个月前 (04-28) 312℃
0喜欢
vue 数据可视化大屏 实现进度条效果，效果通过颜色实现渐变色进度条。
演示地址
使用组件
<template>
<div class="list">
<div class="listBody scrol...
yekong
12个月前 (04-28) 477℃
0喜欢
当前效果为vue 进度条效果实例格子进度条进一步调整，数据改为国家占比，并通过不同国家的国旗来做对应国家的图标，来实现进度条效果实例。
演示地址
使用组件
<template>
<div class="list">
&l...
yekong
12个月前 (04-27) 412℃
0喜欢
左侧为进度条和标题 右侧为相关数字以及文字说明。
进度条设置两层，底层为进度条底图，上层为进度条占比，通过数据计算div宽度来实现进度条占比，使用gsap补间动画 来实现进度条的动画，通过index来控制当前进度条的颜色。
演示地址
使用组件
<template>...
yekong
12个月前 (04-27) 693℃
0喜欢
echarts柱状图除了常见的柱状图外，还有一种是图片类型的柱状图，或者说图标柱状图，
使用两张图标，一张图标表示底图，一张图标表示占比状态，通过pictorialBar来将两种图片图片重叠显示，达到类似下面的效果。
演示效果
实例代码
<template>
...
yekong
1年前 (2023-04-20) 1039℃
0喜欢
vue3 数据可视化大屏 开发中，需要展示一些表格效果，今天整理 vue3 表格进度条效果组件。
通过使用flex控制宽度，通过Vue3SeamlessScroll实现列表滚动，使用自定义样式来实现排名表格效果。
在表格中添加占比进度条组件
演示地址
使用组件
<tem...
yekong
1年前 (2023-04-20) 688℃
0喜欢
vue3 数据可视化大屏 开发中，需要渲染高德地图，地图中覆盖物图标不能满足我们的需要，需要使用自定义html来实现我们想要的效果。
创建一个marker,并通过setContent来将我们的html代码插入到marker中，实现marker自定义html。
关键代码
addM...
yekong
1年前 (2023-04-20) 410℃
0喜欢
