精华内容
下载资源
问答
  • 公司大屏开发心得

    2017-07-21 12:15:44
    大屏开发心得 布局篇 因为大屏不是对外开放的,所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大,设计师给出的设计图通常会...
        

    大屏开发心得

    布局篇

    因为大屏不是对外开放的,所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。

    因为大屏屏幕很大,设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大,也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。设计稿通常也就是一个屏幕的大小,也不需要滚动等其他的用户操作。所以在布局之前需要首先设置的是外框尺寸

    html, body {
        height: 100%;
    }

    大屏首先要把要把这种尺寸的差异解决,这就体现出来flexbox的优势了。因为只要把量出来设计稿的实际尺寸,直接设置在flex上就可以了。

    比如设计稿尺寸是3200px,对应到flex上就是flex: 3200

    大屏模糊的问题

    大屏一般都是多块屏幕拼凑起来的一整块屏。设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了,因为放的很大,锯齿很严重。

    所以后来还是把大屏分开了,设计稿的每个部分拆成一个页面,每个小屏幕显示一个页面。这样子锯齿情况就减轻很多。

    还解决了一个问题,就是整个屏幕的时候,字体太大。即便字号很小也会显示很大(chrome默认最小字号是12px,如果需要显示更小,需要修改浏览器配置)。分开就不会有这个问题了

    展开全文
  • 前端ECharts图表可视化大屏开发案例

    千次阅读 2019-11-02 10:12:08
    前端ECharts图表可视化大屏开发案例 https://blog.csdn.net/daoke_li/article/details/93065550 项目开源地址: 码云:https://gitee.com/daoke0818/pro_bigScreenCharts Github:...

    前端ECharts图表可视化大屏开发案例

    https://blog.csdn.net/daoke_li/article/details/93065550

    项目开源地址:

    码云:https://gitee.com/daoke0818/pro_bigScreenCharts

    Github:https://github.com/daoke0818/pro_bigScreenCharts

    演示地址:http://e-art.top/projects/bigScreenCharts

    http://e-art.top/  关中刀客博客

    使用百度echarts制作可视化大屏——最终效果和动态数据刷新

    https://blog.csdn.net/qq_42213965/article/details/80361661

    https://blog.csdn.net/qq_42213965/article/category/7714312     数据可视化

    https://blog.csdn.net/u014514254/article/category/6576552  帆软WEB报表工具

    jquery+echarts+html 数据可视化大屏展示模板 [ 获取源码,开箱即用 ]

    https://blog.csdn.net/qq_36710522/article/details/102477246


     

    展开全文
  • 目前数据大屏开发项目比较多,但很多新手不清楚从何下手,其实上手很容易;另外 ,当前流行前端框也有很多,比如angularJs, vueJs,reactJs等;不过不必使用这些框架增加额外的学习成本,也可以快速开发数据大屏。...

    目前数据大屏开发项目比较多,但很多新手不清楚从何下手,其实上手很容易;另外 ,当前流行前端框也有很多,比如angularJs, vueJs,reactJs等;不过不必使用这些框架增加额外的学习成本,也可以快速开发数据大屏。这里直接使用html+css+js+echarts进行讲解。

    1.大屏尺寸

    这里使用1920*1080为例。

    2.创建rem.js文件

    代码如下:

    !function(n){
        var  e=n.document,
             t=e.documentElement,
             i=1920,
             d=i/100,
             o="orientationchange"in n?"orientationchange":"resize",
             a=function(){
                 var n=t.clientWidth||320;n>i&&(n=i);
                 t.style.fontSize=n/d+"px"
             };
             e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
    }(window);

    当前大屏宽度为1920,故i=1920;如果设计稿为其他尺寸,修改为对应宽度即可。

    设置好后,将该文件引入到html页面中即可。

    3.样式书写

    div.screen-box{ width: 19.2rem; height: 10.8rem; margin: 0 auto; }

    由于rem.js引入并设置为1920,故直接书写量出的实际尺寸即可。由2中代码可知"d"的值为"i/100",故样式中rem值为实际尺寸/100,所以1920px=19.2rem。

    使用rem使用单位后,可以不同屏幕上正常预览大屏了。

    这是由于rem.js运行后,会获取当前屏幕的宽度,重新计算得出新值赋于html节点上;而rem单位是根据根元素html上的font-size大小来变化的,正是基于这个出发,我们可以在每个设备下根据设备稳定度设置对应的html字号,从而实现自适应布局。如屏幕为1920px时,html上font-size值应为100px;如果小于1920px则如下图,rem.js会重新赋值。

    如此一来,大家就不必再使用百分比去书写样式了,使用rem作为单位就可以1:1完整书写出页面布局了。

    4.echarts使用

    引入地址:https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js

    html书写:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>标题</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="js/rem.js"></script>
    	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
    </head>
    <body>
        <div class="screen-box">
            <div class="echart-box" id="map"></div>
        </div>
    </body>
    </html>

    样式书写:

    /*如图表尺寸为500px*350px,样式应为*/
    div.echart-box{ width: 5rem; height: 3.5rem; }

    js书写:

    function create(){
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption({
            //书写图表参数...
        });
    }
    
    //执行创建图表函数
    create();

    由于使用的单位是rem,rem又是根据html上的font-size的大小来变化的;所以页面刚加载时,rem.js刚刚运行,可能创建图表时,出现获取不到实际的宽和高。故解决方案如下:

    window.onload = function(){
        setTimeout(function(){
            create();
        }, 50);
    }

    如上代码所示,延迟创建图表即可。

    5.echarts随屏幕大小改变而改变

    在开发中,经常会遇到浏览器窗体大小改变,导致图表显示出问题情况,其实这个很好解决,具体如下代码所示:

    var chart;
    
    function create(){
        chart = echarts.init(document.getElementById('map'));
        chart.setOption({
            //书写图表参数...
        });
    }
    
    //执行创建图表
    create();
    
    //监听窗体大小改变,随即修改图表大小
    window.onresize = function(){
        if(chart){
            chart.resize();    //重置图表大小
        }
    }

     

     

    展开全文
  • 去年12月份,我和一个同事受命去学习传说中的大屏开发技术。但我对最新的前端知识不精,对Node.js语言不懂,于是我们开始了一段奇妙的旅程。这里是近期学习开发工作的小结,很多仅仅是个人理解,并不一定正确。 大屏...

    本文全文发表于公司内部技术论坛,本处发布删除了对公司内部产品的介绍和使用部分。

    去年12月份,我和一个同事受命去学习传说中的大屏开发技术。但我对最新的前端知识不精,对Node.js语言不懂,于是我们开始了一段奇妙的旅程。这里是近期学习开发工作的小结,很多仅仅是个人理解,并不一定正确。

    大屏是什么

    这里不讲LED点阵大屏那种比较粗糙的单色大屏,只讲彩色的。大屏我的理解就是定制化的大型屏幕,这块屏幕首先是大,一般按照米来计算长宽,每一块大屏通常由很多小屏幕拼接起来并进行整体的控制。这种大屏一般是定制化的,长宽比例不固定,里面有多少块小屏也说不好,分辨率或粗或细。广义上,比如机场候机口座位旁竖放的单块显示器屏幕、会议室里的大屏幕显示器等都属于广义上的大屏,大屏上的页面一般都是Web网页。

    做一个大屏要哪些系统

    大屏一般为了展示,交互性较少。一般一个完整的大屏系统分为三块:

    1. 大屏:也就是大家看到的大屏幕,一般以展现为主,有一块屏幕一直展示,也有几块屏幕轮播,但极少有与用户交互的成分;
    2. 控制界面(可选):大屏的一些简单配置、控制显示的系统,有在PC上,也有在Pad上。当然,如果是一块死的,没有任何交互、轮播选择的大屏,可以是没有控制界面的。
    3. 查询界面(可选):大屏中展示的数据如果有任何疑问,大屏本身是不负责解答和更详细的根据需求下钻展示的。而查询界面说白了其实就是普通的应用系统,能够进行数据探索、下钻、分析,发现问题,解答疑问。

    做大屏需要考虑什么

    做大屏和做普通的PC、Mobile端界面还是有区别的,主要表现在:

    1. 定制性高。因为分辨率、长款比、屏幕规格比较特殊,通用性低,一般具体的大屏项目化多于产品化,产品化的大屏开发难度要高于项目化的大屏开发难度。不同的情况下有不同的考虑要点:

      • 长宽比:一般的屏幕可以自适应,但是如果长宽比严重失调的时候,自适应后显示效果大打折扣,需要去根据实际比例去针对性的设计;
      • 分辨率:同样面积下,像素大小差别大,甚至有的颗粒感比较明显,这时候如果显示细腻的图形,则不会有良好的效果;
      • 屏幕色彩表现力:如果能有16位色、24位色最好,有的屏幕色彩表现力若,色域有偏差,显示偏色,那么就该慎重考虑渐变色的使用,对于背景色,保险起见多数用暗色,如黑色、湛蓝,这样也更能视觉聚焦;
    2. 度量单位选择的不同。一般来说PC显示器用px为度量单位的居多,这种度量方式开发最为方便。近距离观看的设备(PC显示器、移动设备,甚至包括电视)上均需适配的则用pt居多。在大屏项目中,如果需要适配不同大小的大屏则需要考虑使用相对度量单位,如em、rem,使页面在不同大小的屏幕上能等比放大、缩小。
    3. 空间局限 大屏界面没有交互,甚至连滚动条都不能存在,因此,一屏就是一屏,一屏多少像素一个点都不会多,一个点都不会少。在这空间内要尽可能多的把信息有主次的传递出来。
    4. 显示控制分离:大屏展现出来的部分没有互动,不代表整个大屏解决方案没有互动的成分,大屏的控制端和展现端分离,控制端是一个富交互的模块。
    5. 长时间显示:网页在用户观看时打开,用户浏览后关闭,而大屏则有可能十几个小时甚至几十天连续不断在一个页面运行而不关闭。在这种情况下,功能上需要支持定时刷新,这个刷新不是全页面的刷新而是异步的数据上的刷新,性能上要求没有内存泄露,一旦内存泄露长时间运行必定会导致网页崩溃。
    展开全文
  • vue中使用rem布局解析+大屏自适应 公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下。首先项目中,做过移动端的适配,也有现在的大屏需求,中间都离不开不一个单位rem,自适应看...
  • 大屏开发是门艺术,技术和审美缺一不可!但在现实生活中,这两者却往往像鱼与熊掌,难以兼得。对于开发人员来说,功能实现驾轻就熟,但在样式设计、图表布局、色彩搭配上,耗费大量精力也未必尽如人...
  • 前段时间分享了我之前整理的可视化大屏模板,来了不少人咨询大屏开发项目,很多朋友想付费请我去做大屏项目,在这里感谢各位朋友的抬爱,工作原因无法腾出时间去接项目,但是很乐意和大家分享我在大屏开发上积累的...
  • 1. 采用vue组件开发,方便扩展,同时可以设置属性值; 2. 数据接口,分post和get两种方式,数据以json传回。 3. 调用js,实现拖拉拽,减轻开发强度。 ...
  • echarts -数据大屏开发,资料汇总

    千次阅读 2020-11-29 19:28:41
    部门新下任务,大屏数据展示,安排我和另外一个同事共同开发,最终效果如下。 效果图 本次数据看板用到的前端技术有vue、echarts。本篇主要是对echarts技术栈资料的总结,echarts使用简单,在此不展开,有学习可以...
  • 基于vue的可视化大屏开发

    千次阅读 2020-04-27 10:55:32
    简介 业界解决方案 百度的 sugar 可视化解决方案 https://sugar.baidu.com/home 阿里datav ...腾讯云图 ...尺寸 现在一般的大屏设计基本都是16:9 或者是 32:9的尺寸 设计稿 设计稿给出来的图也基本是16:9...
  • 报表自动化: 如何选择可视化大屏开发利器​www.coologic.cn我们在前文完成了各种数据的准备:原始数据、指标数据、报表表格等等,但仍然无法解决“阅者”难以理解庞大数据。我们需要用图文并茂的形式来提高信息的可...
  • 公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下。 首先项目中,做过移动端的适配,也有现在的大屏需求,中间都离不开不一个单位rem,自适应看起来就很麻烦,不过无惧困难,困难才...
  • 开发AR个人总结: 1.开发移动端相对来说Vuforia兼容性好一些 2.开发PC端相对来说EasyAR兼容性好一些 我这里使用的是EasyAR 实现AR大屏幕大致步骤: 1.去EasyAR官网下载 对应的Unity SDKEasyAR Unity版下载地址 ...
  • 1 前言设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。前面我们讲过可以使用viewport缩放方案实现页面级...
  • 设置TextView文本超长后滚动效果
  • Vue 中使用Echarts 其实很简单,粘就完了 echarts 和axios 使用 ...一:下载引入screenfull 插件 npm install screenfull --save //在调用全屏功能的组件中引入 import screenfull from 'screenfull' ...
  • 如何开发一个可视化大屏? 我们完成了各种数据的准备:原始数据、指标数据、报表表格等等,但仍然无法解决“阅者”难以理解庞大数据。我们需要用图文并茂的形式来提高信息的可理解性、易理解性,并以固定的...
  • 三维数据大屏可视化系统包含多源数据连接、生成二维/三维视图、构建可视化大屏大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程,供参考。 多源数据...
  • 如何开发一个可视化大屏?我们完成了各种数据的准备:原始数据、指标数据、报表表格等等,但仍然无法解决“阅者”难以理解庞大数据。我们需要用图文并茂的形式来提高信息的可理解性、易理解性,并以固定的排布方式使...
  • rem + simple-flexible 适配方案简单解析rem 相对于根元素 的 font-size 的大小来计算坐作为一个单位;simple-flexible 是根据手淘团队 lib-flexible.js,比较,改写的一个插件,兼容 UC 竖屏转横屏出现的 BUG,...
  • 通常在网站开发过程中,会遇到一系列的问题,尤其是现在终端设备丰富的今天来说,在相对字体里面通常有三种字体单位不知道让开发人员如何进行选择?分别是px和em、rem。跟着我们往下看! 网站建设并非工业设计。也...
  • 大屏可视化的自适应处理,除了要懂得前端的基本布局以外,还需要了解各个场景下的自适应方案选型,这里提供三种自适应处理大屏的方案
  • 如何使用 REM 移动端适配方案参考文档:MDNCSS进阶REM 是什么首先了解一下 CSS 中一些常见的长度单位:px 绝对长度单位,像素注意:浏览器(Chrome)默认文字大小为 16px,所能设置的最小单位为 12pxem相对长度单位...
  • 一、版权注释格式 <!-- @author Poleng @email 30930572@qq.com @create date 2020-07-18 08:42:38 @modify date 2020-03-20 15:17:15 @desc A data visualization project based on echarts.js....二、

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,633
精华内容 653
关键字:

大屏开发