探索前端可视化大屏:创造令人惊叹的数据可视化体验

介绍

🔥🔥Vue3 + TS + Echarts + Pinia 优秀可视化数据大屏解决方案,包括移动端与 PC 端的响应式适配处理,实现移动端和PC端不同布局和兼容。欢迎大家提出Issues

项目地址

http://124.221.177.11/#/login

gitee开源地址gitee.com/yuanjinwei/...

github开源地址github.com/williamyuan...

项目展示

  • 登录页
#left
  • PC 端首页
#left
  • 小于 576px 设备效果
#left

操作文档

登录项目之后,在首页以关注度图表为例

  1. 图表可支持左右滑动,图表内长按鼠标左滑或者右滑进行不同月份的展示
  2. 右上角从左到右图标的功能分别为:切换至折线图、切换至柱状图、详情弹窗
  3. 打开详情弹窗后可以通过下拉搜索框进行输入搜索选择要添加至图表的项目,也可进行删除
#left
#left

项目中间部分的雷达图和虚拟列表可以进行交互,点击列表的项目可以添加至雷达图,点击雷达图某个项目可以展示详情,点击 remove 可以移除

#left
#left

项目亮点

  • 实现对不同大小的屏幕/设备的良好适配 以及针对小屏幕设备有不同的布局以及兼容
  • 不定高无限滚动加载虚拟列表 的实现,控制列表渲染数据量的同时实现列表无限滚动
参数/事件 说明 类型 默认值
dataSource 传入的数组 Array 必传
loading 分页加载loading状态 Boolean 必传
estimatedHeight 每一项的初始高度,用于传入渲染后再通过计算得到不定高列表的真实高度 Number 必传
@scrollEnd 列表滚动到底部触发的方法 Function -
ini 复制代码
<virtual-list
	:data-source="github.dataSource"
	:loading="github.loading"
	:estimated-height="30"
	@scroll-end="github.addData"
	class="virtual-list"
>
	<template #item="{ item }">
		<a-tooltip placement="top" color="rgba(73, 146, 255, 0.8)">
			<template #title>
				<span>项目名:{{ item.name }}</span>
			</template>
			<div class="virtual-list-item" @click="radarFirst.chart.addRadarData(item.name)">
				<span class="virtual-list-item-col">{{ item.name }}</span>
				<span class="virtual-list-item-col">{{ item.influence }}</span>
				<span class="virtual-list-item-col">{{ item.trend }}</span>
				<span class="virtual-list-item-col">{{ item.response }}</span>
				<span class="virtual-list-item-col">{{ item.activity }}</span>
				<span class="virtual-list-item-col">{{ item.github }}</span>
			</div>
		</a-tooltip>
	</template>
</virtual-list>
  • Echarts 图表相关 hooks 的封装,提高如折柱混合图、图表详情弹窗的代码复用性
  • 实现下拉搜索选择框、列表与图表之间的增删交互 ,根据文档解决 雷达图等图表增删时的异常问题
  • 使用 transition 标签以及图片预加载 来优化图片未加载完全等导致的用户视觉体验问题
  • 实现 Echarts 等组件的按需加载。在打包过程中对项目大体积模块进行分块打包以及优化项目字体文件大小
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
90后的晨仔6 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
90后的晨仔6 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
90后的晨仔7 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任7 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
SY_FC7 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
爱吃香蕉的阿豪7 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
OpenTiny社区10 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
ReturnTrue86811 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js