一、项目描述1 前端项目1.1 项目简介一个基于 Vue、datav、Echart 框架的 " 数据大屏项目 "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。项目需要全屏展示（按 F11）。项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用按需引入。拉取项目之后，建议按照自己的功能
前言数据可视化在当下信息时代已经成为炙手可热的话题，而 B/S 化趋势，也使得许多大屏应用上在网页端出现，今天给大家分享一套不一样风格的大屏页面，与传统深蓝色不同，这次采用了暗红色设计，搭配粉色及黄色，加入了一些工业元素，让页面有别具一格的效果。而 Hightopo 独特的自适应机制，也解决了大屏需要针对分辨率设计的困扰，达到了可以一页用多屏的效果。随着工业4.0变革的推进，逐步开始走向了利用信息
在进行vue数据可视化大屏开发之前，首先需要了解整个开发流程。下面我将用表格展示开发的步骤，并注释每一步需要做什么以及需要使用的代码示例。
| 步骤 | 操作 |
| ------ | ------ |
| 步骤一 | 准备数据：准备需要展示的数据，可以是从后端接口获取的数据，也可以是静态数据。 |
| 步骤二 | 搭建Vue项目：新建一个Vue项目，可以使用Vue CLI工具进行快速搭建。 |
原创
2024-04-23 20:31:34
346阅读
Vue2.x动态组件的使用实现组件整合大屏展示一、问题项目中开发多个可视化的页面（组件），现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内，并且根据配置数据划分占比以及位置关系（横向位置，垂直高度统一，横向宽度根据配置数据的占比进行划分）大致效果如图所示，横向排列，按照数据中小屏组件数据的先后顺序进行排列即可：二、解决解决思路，主要利用Vue的动态组件，配合CSS的flex布局方式
转载
2024-03-28 12:54:50
820阅读
大屏开发接近尾声第一次接手大屏，从六月二十多号，前前后后，中间的修改和数据对接，大屏的开发到现在8月初，即将解近尾声，当然中间也因为一些事情搁置了，实际开发的时间应该没有这么久。6.9~7.8 静态布局+已有数据对接（若有全部数据，UI确定，在此解决应该全部完成了）7.8~8.3 UI修改及调整8.6 开始测试8.27 展会展示大屏开发总结项目开发背景 项目本身已有一个web系统，今年8月有行业展
转载
2023-09-05 14:45:22
96阅读
目前数据大屏开发项目比较多，但很多新手不清楚从何下手，其实上手很容易；另外 ，当前流行前端框也有很多，比如angularJs, vueJs,reactJs等；不过不必使用这些框架增加额外的学习成本，也可以快速开发数据大屏。这里直接使用html+css+js+echarts进行讲解。1.大屏尺寸这里使用1920*1080为例。2.创建rem.js文件代码如下：!function(n){
va
转载
2023-12-13 00:59:12
60阅读
一、前言设备监控主要用来实时监测制造零件等使用的设备的工作运行状态，每个设备都有对应的需要、分组名称、分组编号、设备名称、文字1、文字2、工作状态（1-开机 2-待机 3-维护 4-空），不同的工作状态不同颜色显示，比如维护状态红色显示，待机状态黄色显示。右侧显示对应设备分组的稼动率、开机数量、待机数量、维护数量。Qt源自c++，类的思想非常强大，比如这个设备监控模块，每个设备需要显示设备名称、多
转载
2024-05-10 13:26:00
56阅读
大屏自适应之前有用过postcss-pxtorem之类的插件，但是插件只针对css样式，在js和vue模板中的样式，还有echarts的属性值都不能经过插件直接转换。要手动分装方法再次调用，就会比较麻烦，而且有时候写着写着就忘加了，开发就一个分辨率的显示器，最多就是f12打开挤兑挤兑测测。解决方案 ------- 缩放 + scrollbar（非全屏）可以使用transform: scale(${
SCM-2150T监视器，一款专业电影级后期调色监视器，出色的功能得到了影视行业小伙伴们的广泛认可和信任。之前介绍过我们的2410T的产品，相比这款，SCM-2150T性价比要高很多。scm-2150t 是一款21.5寸的电影级雷电调色监视器（thunderbolt cine monitor），具有强大的图像处理能力，以及丰富的输入信号接口设计，适用于对色彩要求严苛的前期节目拍摄，后期制作及电影调
文章目录前言一、dataV可以实现什么效果？二、使用步骤1.安装依赖2.引入3.使用三、效果 前言随着信息化的发展，大屏展示的需求越来越多，使用e-charts一个一个的做配置太麻烦，于是找到了封装好的dataV，直接拿来用就可以实现酷炫的大屏效果。（画外音：部门接了几个搞大屏的项目，技术总监让研究一下大屏项目通用性，然后我研究了一下dataV）附上官方API链接一、dataV可以实现什么效果？
效果图因为开发完了才写的，效果图不能展示全，效果不是很全
大屏 前言在实际开发过程中，我们经常需要一个大屏进行一些常规数据的展示。在Vue中也是提供了这样的容器组件我们可以使用基于Vue的 Datav组件 + Vue-Baidu-Map地图组件 + Echarts图表组件 + 时间戳就实现基本布局在Vue中配置大屏路由的时候，我们注意不要让大屏的路由出现在侧边栏的地方，让他点击或者输入地址出
数无形时少直觉，形无数时难入微。——华罗庚 我们都尝试去观察生活，但是有时却缺少了总结生活；有时我们太着眼细节，忽略了大局。数据和可视化似乎是两个好兄弟，就像仰望星空与脚踏实地的两种状态。 可视化开发的知识框架 可视化目的 数据来源 客户系统长期积累的数据； 客户系统设备实时产生数据； 从外界导入数 ...
转载
2021-07-24 19:09:00
240阅读
2评论
# JavaScript 大屏开发：现代大屏展示技术解析
在现代信息化社会中，数据可视化已成为各企业的必要组成部分，尤其是在会议室、指挥中心等场所，常常需要大屏展示实时数据。JavaScript作为一个强大的前端开发语言，凭借其丰富的库和框架，能够高效地实现大屏展示开发。本文将探讨JavaScript大屏开发的基本概念及如何实现一个简单的大屏展示方案。
## 一、JavaScript 大屏开发
原创
2024-09-04 05:02:16
176阅读
最近后台改版，要求login页适配大小屏幕，超大屏幕（浅浅的记录下）；实现方案：Vue +lib-flexible实现大小屏幕，超大屏幕的适配展示。lib-flexible是淘宝项目组开发的插件，属于开源项目，可以在各种项目（vue，react）中引入并使用，利于其将px转成rem的单位转换形式，不需要我们再根据分辨率不同写很多的适配代码。看其他文档实现步骤：1、安装lib-flexiblenpm
转载
2024-03-06 12:21:39
1605阅读
Vue电商数据分析大屏开发详解一、项目概述1.1 功能定位这是一个电子商务数据分析实时大屏系统，用于展示电商平台的核心业务指标、销售趋势、用户行为等关键数据。适用于企业管理层监控业务运营状况。1.2 技术栈Vue 3.3.4 - 使用Composition API构建响应式界面ECharts 5.4 ...
此文为本人大屏项目上线后的经验总结 前言因为是国企线上应用的活动大屏，我就不附图了。代码仅供参考。 一、vue配置 1. 我是用vue-cli 搭建的，大屏项目复杂度不高，vue-router、vuex 、axios、sass 等都可以不用，vue、echarts就够用。 &nbs
转载
2024-01-04 07:45:46
1067阅读
简介demo在这里https://github.com/tao1993/spring-boot-demos/tree/main/demo4jwt的机制大概是后端生成一个token，前端自己每次请求带上这个token来给后端做认证JWT流程 -》 用户登录 -》 服务器根据用户信息生成一个token作为令牌 -》令牌保存在客户端(一般是localStorage或sessionStorage)，服务端
转载
2024-06-21 08:53:33
67阅读
布局采用flex + vw/vh 数值单位全部使用vw、vh实现， 首先去除所有默认，这里使用的是 KISSY CSS Reset 去掉默认，自己再重写部分把px改写 Echarts图表适配 图表字体
原创
2022-04-12 14:42:59
2839阅读
简介大屏设计（AJ-Report）是一个可视化拖拽编辑的全开源项目，直观，酷炫，具有科技感的图表工具。内置的基础功能包括数据源，数据集，报表管理。多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17种大屏组件，不会开发，照着设计稿也可以制作大屏。三步轻松完成大屏设计：配置数据源—->写SQL配置数据集—->拖拽配置大屏—-&
项目中header用的element的meun菜单，由于项目中header的布局，使用layout布局也没法实现屏幕的宽度变化 菜单的每个题目的间距适当缩小，就想到用监听屏幕宽度来让他们之间的间距大小变化data(){
return{
screenWidth: 1920
}
},
mounted() {
// header头部监听 let that = this
window.addEventLi
