当前位置：网站首页 > 技术分类 > 正文

vue3版可视化大屏vue-big-screen-plugin

ztj100 2025-03-25 19:44 14 浏览 0 评论

之前有给大家分享一个vue2.x大屏图表可视化项目vue-big-screen。这次分享的是该项目已经更新了vue3版本。

vue-big-screen-plugin 基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。

项目结构

项目中所有的 ECharts 图表渲染都是基于
components/echart/index.tsx 封装组件创建的，已经对数据进行了深度监听，能够动态渲染图表数据。

快速安装

# 克隆项目
git clone git@gitee.com:MTrun/vue-big-screen-plugin.git

# 安装依赖
npm i

# 运行
npm run serve

# 构建打包
npm run build

屏幕适配方案放弃了 Vue2 版本的 rem 方案，使用更流程通用的 css3：scale 缩放方案，项目的基准尺寸是 1920px*1080px，所以支持用比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充。

# vue3文档
https://v3.cn.vuejs.org/

# 仓库地址
https://gitee.com/MTrun/vue-big-screen-plugin

OK，今天就分享到这里。大家感兴趣的话可以去看一看哈。

上一篇：Web Components:自定义元素与Shadow DOM的实践
下一篇：Vue vben admin - 基于 Vue3 / Ant Design Vue 的高颜值管理后台UI框架

相关推荐

使用 Pinia ORM 管理 Vue 中的状态: 转载说明：原创不易，未经授权，谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术，但随着应用程序复杂性的增加，处理状态可能变得更具挑战性。这就是为什么...

Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码: Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别: webpack、vite、vue-cli、create-vue这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。...

超赞 vue2/3 可视化打印设计VuePluginPrint: 今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

搭建Trae+Vue3的AI开发环境（vue3 ts开发）: 从2024年2025年，不断的有各种AI工具会在自媒体中火起来，号称各种效率王炸，而在AI是否会替代打工人的话题中，程序员又首当其冲。...

如何在现有的Vue项目中嵌入 Blazor项目?: ...

Vue中mixin怎么理解?（vue的mixins有什么用）: 作者：qdmryt转发链接：https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...

Vue脚手架安装，初始化项目，打包并用Tomcat和Nginx部署: 1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹，安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示：创建my-first-vue...

新手如何搭建个人网站（小白如何搭建个人网站）: ElementUl是饿了么前端团队推出的桌面端UI框架，具有是简洁、直观、强悍和低学习成本等优势，非常适合初学者使用。因此，本次项目使用ElementUI框架来完成个人博客的主体开发，欢迎大家讨论...

零基础入门vue开发（vue快速入门与实战开发）: 上面一节我们已经成功的安装了nodejs，并且配置了npm的全局环境变量，那么这一节我们就来正式的安装vue-cli，然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...

.net core集成vue（.net core集成vue3）: react、angular、vue你更熟悉哪个？下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue（npm...

使用 Vue 脚手架，为什么要学 webpack?(一): 先问大家一个很简单的问题：vueinitwebpackprjectName与vuecreateprojectName有什么区别呢？它们是Vue-cli2和Vue-cli3创建...

vue 构建和部署（vue项目部署服务器）: 普通的搭建方式（安装指令）安装Node.js检查node是否已安装，终端输入node-v会使用命令行（安装）npminstallvue-cli-首先安装vue-clivueinitwe...

Vue.js 环境配置（vue的环境搭建）: 说明：node.js和vue.js的关系：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境；类比：Java的jvm(虚拟机)...

vue项目完整搭建步骤（vuecli项目搭建）: 简介为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。...

取消回复欢迎你发表评论:

一周热门

最近发表

首页
收录
顶部