分类:vue组件

vue组件

vue进度条实现国家占比效果

vue进度条实现国家占比效果
当前效果为vue 进度条效果实例格子进度条进一步调整,数据改为国家占比,并通过不同国家的国旗来做对应国家的图标,来实现进度条效果实例。 演示地址 使用组件 <template> <div class="list"> &l...

yekong 2年前 (2023-04-27) 喜欢

echarts 使用pictorialBar实现自定义图片柱状图

echarts 使用pictorialBar实现自定义图片柱状图
echarts柱状图除了常见的柱状图外,还有一种是图片类型的柱状图,或者说图标柱状图, 使用两张图标,一张图标表示底图,一张图标表示占比状态,通过pictorialBar来将两种图片图片重叠显示,达到类似下面的效果。 演示效果 实例代码 <template> ...

yekong 2年前 (2023-04-20) 喜欢

vue3 带进度条表格效果

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

yekong 2年前 (2023-04-20) 喜欢

vue3 高德地图覆盖物自定义html代码

vue3 高德地图覆盖物自定义html代码
vue3 数据可视化大屏 开发中,需要渲染高德地图,地图中覆盖物图标不能满足我们的需要,需要使用自定义html来实现我们想要的效果。 创建一个marker,并通过setContent来将我们的html代码插入到marker中,实现marker自定义html。 关键代码 addM...

yekong 2年前 (2023-04-20) 喜欢

element-plus 使用实例汇总

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

yekong 2年前 (2023-04-19) 喜欢

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

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

yekong 2年前 (2023-04-19) 喜欢

vue3 高德地图边框效果实例

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

yekong 2年前 (2023-04-18) 喜欢

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

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

yekong 2年前 (2023-04-18) 喜欢