分类: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) 喜欢

vue 数据可视化大屏 智慧用电

vue 数据可视化大屏 智慧用电
vue 数据可视化大屏 智慧用电 如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870 开发环境 vue2 + webpack + js nodejs 14 分辨率 1920*1080 演示地址 vue 数据大屏 智慧用电 项目截图 项目笔记 js ...

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

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) 喜欢

Axios 刷新token并刷新页面

Axios 刷新token并刷新页面
vue3 可视化数据大屏 - 数据资产大屏 项目开发时,因为因为接口token时效短,我们需要当token失效接口报401后,重新请求接口获取新的token,并刷新当前页面重新请求接口。 实现代码 import axios from 'axios' // import {Mess...

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