vue 数据可视化大屏 实现进度条效果,效果通过颜色实现渐变色进度条。
演示地址
使用组件
<template>
<div class="cardBody">
<div class="cardBodyLi...
yekong
2年前 (2023-04-28)
喜欢
vue 数据可视化大屏 实现进度条效果,效果通过颜色实现渐变色进度条。
演示地址
使用组件
<template>
<div class="list">
<div class="listBody scrol...
yekong
2年前 (2023-04-28)
喜欢
当前效果为vue 进度条效果实例格子进度条进一步调整,数据改为国家占比,并通过不同国家的国旗来做对应国家的图标,来实现进度条效果实例。
演示地址
使用组件
<template>
<div class="list">
&l...
yekong
2年前 (2023-04-27)
喜欢
echarts柱状图除了常见的柱状图外,还有一种是图片类型的柱状图,或者说图标柱状图,
使用两张图标,一张图标表示底图,一张图标表示占比状态,通过pictorialBar来将两种图片图片重叠显示,达到类似下面的效果。
演示效果
实例代码
<template>
...
yekong
2年前 (2023-04-20)
喜欢
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理 vue3 表格进度条效果组件。
通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动,使用自定义样式来实现排名表格效果。
在表格中添加占比进度条组件
演示地址
使用组件
<tem...
yekong
2年前 (2023-04-20)
喜欢
vue3 数据可视化大屏 开发中,需要渲染高德地图,地图中覆盖物图标不能满足我们的需要,需要使用自定义html来实现我们想要的效果。
创建一个marker,并通过setContent来将我们的html代码插入到marker中,实现marker自定义html。
关键代码
addM...
yekong
2年前 (2023-04-20)
喜欢
vue 数据可视化大屏 智慧用电
如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870
开发环境
vue2 + webpack + js nodejs 14
分辨率
1920*1080
演示地址
vue 数据大屏 智慧用电
项目截图
项目笔记
js ...
yekong
2年前 (2023-04-19)
喜欢
element-plus在使用的时候,一般并不能直接满足我们的需要,还需要二次调整,比如修改ui组件的样式或者功能调整,这里将这些调整整理出来,方便查找。
说明文档
文档常用的有两个,有时候会无法访问,所以两个都整理出来了。
element-plus
element-plus 国...
yekong
2年前 (2023-04-19)
喜欢
vue3 数据可视化大屏 - 数据资产大屏 项目开发中,需要高德地图渲染热力图效果。我们可以通过AMap.Heatmap
初始化热力图,并且可以设置半径以及透明度。通过heatmap.setDataSet来设置热力图的坐标以及数值。
var heatmap = new AMap....
yekong
2年前 (2023-04-19)
喜欢
vue3 可视化数据大屏 - 数据资产大屏 项目开发时,因为因为接口token时效短,我们需要当token失效接口报401后,重新请求接口获取新的token,并刷新当前页面重新请求接口。
实现代码
import axios from 'axios'
// import {Mess...
yekong
2年前 (2023-04-19)
喜欢