vue3 数据可视化大屏项目开发中,需要点击地图获取经纬度,我们可以通过代码来实现想要的效果。
通过地图点击事件e.lnglat.getLng(), e.lnglat.getLat()两个方法分别获取经度和纬度。
演示实例
实现代码
<template>
<...
2年前 (2023-04-18)
喜欢
vue3 数据可视化大屏 开发中,有个要求,需要显示自定义图标,并且可以点击实现弹窗,可以通过筛选框来实现图标筛选。
演示实例
引入高德地图
<script type="text/javascript"
src="h...
2年前 (2023-04-18)
喜欢
vue3 数据可视化大屏 开发中,有个要求,地图要可以实现测距,搜索了一下高德地图支持这个功能,将实现方法记录一下。
演示实例
引入高德地图
<script type="text/javascript"
src="h...
2年前 (2023-04-18)
喜欢
进度条效果:
进度条颜色是渐变色,可以通过传值自定义
进度条带有动画效果 使用gsap实现补间动画
进度条有默认背景色
进度条宽度根据总数和当前数据计算百分比
数字居右展示
演示地址
使用组件
<template>
<div class="li...
2年前 (2023-04-17)
喜欢
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理 vue3 表格自定义排行榜样式效果组件。
通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动,使用自定义样式来实现排名表格效果。
演示地址
使用组件
<template>...
2年前 (2023-04-17)
喜欢
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理 vue3 带排名效果的滚动表格组件。
通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动,使用自定义图标来实现排名表格效果。
演示地址
使用组件
<template>
...
2年前 (2023-04-17)
喜欢
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理滚动表格效果。
通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动.
演示地址
使用组件
<template>
<div class="itemBody...
2年前 (2023-04-17)
喜欢
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理渐变色背景滚动表格效果。
这里表格背景我们使用相对定位的方式将背景模块放在表格后面。来达到渐变背景色的效果。
演示地址
使用组件
<template>
<div class="it...
2年前 (2023-04-17)
喜欢
随着项目框架想着vue3转移,一些依赖的插件也发生了变化,以前使用的是vuex,最近改为了pinia组件,一些写法不清楚咋写的,需要梳理一下。习惯了vue2的写法,虽然框架改为了vue3很多写法还是沿用的vue2.
安装依赖
pnpm i pinia
创建store.js
im...
2年前 (2023-04-16)
喜欢
数据可视化大屏 项目开发中经常会需要各种各样的边框,为了方便复用可能会出现的类似边框,这里将可能会遇到的 数据可视化大屏边框组件 都整理出来,今天整理的是渐变色加两个底角效果。
效果截图
演示地址:
vue3 数据可视化大屏边框组件-渐变色加两个底角效果
组件代码
<te...
2年前 (2023-04-15)
喜欢