探索前端可视化大屏：创造令人惊叹的数据可视化体验_echarts图表内长按鼠标左滑或者右滑-CSDN博客

本文链接：https://blog.csdn.net/weixin_48747528/article/details/133772959

介绍

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

项目地址

http://124.221.177.11/#/login

gitee开源地址：https://gitee.com/yuanjinwei/DM_screen_web（开源出来就是纯用爱发电有劳大家点个star支持鼓励一下😭）

github开源地址：https://github.com/williamyuanjw/DM_screen_web

项目展示

登录页

PC 端首页

小于 576px 设备效果

操作文档

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

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

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

项目亮点

实现对不同大小的屏幕/设备的良好适配以及针对小屏幕设备有不同的布局以及兼容
不定高无限滚动加载虚拟列表的实现，控制列表渲染数据量的同时实现列表无限滚动

参数/事件	说明	类型	默认值
dataSource	传入的数组	Array	必传
loading	分页加载loading状态	Boolean	必传
estimatedHeight	每一项的初始高度，用于传入渲染后再通过计算得到不定高列表的真实高度	Number	必传
@scrollEnd	列表滚动到底部触发的方法	Function	-

<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>