数据可视化（ Data Visualization）是利用计算机图形学和图像处理技术，将数据或信息转换成图数据可视化（ Data Visualization）是利用计算机图形学和图像处理技术，将数据或信息转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。当你能够充分理解数据,并能够轻易向他人解释数据时,这是数据体现其价值的方式之一。

了解现场大屏

常见的大屏分类：拼接屏、LED无缝屏、单体投影屏。

1、拼接屏

拼接屏常见分类有LCD（Liquid CrystalDisplay）、DLP（Digital LightProcession）、PDP（Plasma DisplayPanel）拼接屏。

LCD拼接屏：也称为LCD拼接投影技术，是由多块液晶电视拼接在一起组成的大屏。拼缝在3-7mm。

优点：高画质显示。

缺点：物理缝隙明显，容易反光。

 图片来自网络，侵权请告知修改

DLP拼接屏：全称背投大屏拼接，采用数字光处理技术，拼缝一般小于0.5mm。

优点：拼缝小，不反光，亮度低，适合长时间观看，比如一些监控系统。

缺点：亮度低，受灯光影响大易出现色偏。

 图片来自网络，侵权请告知修改

PDP拼接屏：采用离子显示板拼接技术。拼缝1-4mm。

优点：电磁场干扰小，图像清晰稳定无闪烁，不会导致眼睛疲劳。

缺点：像素点间距大，耗电高，寿命短。

 图片来自网络，侵权请告知修改

2、LED无缝屏

LED（Light EmittingDiode）屏是由发光二极管，多个发光二极管集成为一块大屏，有像素缝隙。无物理缝隙，从现实上又分为单基色，双基色、全彩色。

优点：高饱和度高亮度全彩显示，效果最佳，几乎没有色偏。

缺点：亮度高，如果放在室内，刺眼易疲劳，适合展示类，指挥类大屏，小间距成本高。

 图片来自网络，侵权请告知修改

3、单体投影屏

单体屏投影屏包含了以上所有大屏显示技术，简单来说就是一块独立大屏，我们生活中常用的PC屏幕，甚至一个大电视机。

 图片来自网络，侵权请告知修改

了解现场投屏情况

1、电脑屏幕直投方式输入信号

无论在通过浏览器（B/S）还是PC应用（C/S）端，大屏与电脑建立连接，都是将电脑显示的画面1:1投放到大屏上，通过操作电脑控制大屏。

这种情况一定是输出分辨率和大屏分辨率比例相同或者差别不大，假如比例不同，电脑显示的画面被拉伸或出现滑条，会导致操作电脑出现误差。可以是一台显示器，也可以是组合屏；可以是一路信号，也可以是多路信号，如下图

 一路信号示意

 多路信号示意

重点，如何计算分辨率

1、拼接屏计算方式

例如：一块大屏由3x4块分辨率1920*1080的LCD拼接屏或DLP拼接屏拼接而成，如下图：

 拼接屏

宽分辨率：1920*4=7680px；

高分辨率：1080*3=3240px；

宽高比=24:10

2、LED屏计算方式：

例如：LED单体屏幕尺寸一般为500*500mm，那么一块长6m，高3m，也就是说横向有12块单体LED模块，纵向有6块单体LED模块，P值(LED屏点间距)=3.91，如下图：

 LED屏

单体分辨率=500mm/3.91≈128px 即128*128

宽分辨率：128*12=1536px；

高分辨率：128*3=768px；

宽高比=20:10

3、单体投影屏

以说明书提供支持最大分辨率参数为准，或按照以上方式计算。

注意：在计算大屏分辨率的同时，也要结合终端显卡最大分辨率是否支持大屏分辨率。在大屏分辨率过大、显卡资源有限时，可根据大屏分辨率宽高比，适当缩小计算分辨率。如大屏计算分辨率为：7680*4320，显卡最大支持分辨率可调出3840*2160，宽高可以同时缩小2倍，满足宽高比。在B端或C端调整自适应分辨率即可。

通过大屏系统信息，计算出的分辨率需要准确无误地传递给设计师，这是做大屏可视化调研的重要一步。喜欢我的分享，可以点击关注，更多精彩内容，敬请期待，我们下期再见。

echarts内部屏幕大小自适应

参考文章：echarts自适应问题，echarts中怎么改变字体单位实现自适应

1. 写一个换算函数

//当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;
//换算方法
function nowSize(val,initWidth=1920){
    return val * (nowClientWidth/initWidth);
}

2. 在echarts有关大小的地方进行使用

legend: {
        data: ['门禁进入', '门禁外出'],
        align: 'left',
        top: nowSize(18),
        right: nowSize(20),
        textStyle: {
            color: "#c1c5cd",
            fontSize:nowSize(13)
        },
        itemWidth: nowSize(10),
        itemHeight: nowSize(10),
        itemGap: nowSize(12)
}

PC端配置屏幕大小自适应

参考文章：vue PC端项目，做不同屏幕大小的自适应（一）亲测有效

1. 安装postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2. 新建配置文件rem.js

const baseSize = 16
function setRem () {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
setRem()
window.onresize = function () {
  setRem()
}

3. 在main.js中引入

import './utils/rem'

4. 配置vue.config.js

// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

单页面自适应方案

编程时用rem来编写，通过改变html的font-size来实现自适应

1. 编写动态改变font-size函数

// 屏幕自适应
fitScreen() {
  let htmlWidth =
     document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName("html")[0];
  htmlDom.style.fontSize = 16 * (htmlWidth / 1480) + "px";
},

2. 在mounted中加窗口大小改变的监听

mounted() {
  this.fitScreen();
  let sizeFun = () => {
    this.fitScreen();
  };
  window.addEventListener("resize", sizeFun);
},

前言

数据可视化在当下信息时代已经成为炙手可热的话题，而 B/S 化趋势，也使得许多大屏应用上在网页端出现，今天给大家分享一套不一样风格的大屏页面，与传统深蓝色不同，这次采用了暗红色设计，搭配粉色及黄色，加入了一些工业元素，让页面有别具一格的效果。而 Hightopo 独特的自适应机制，也解决了大屏需要针对分辨率设计的困扰，达到了可以一页用多屏的效果。

随着工业4.0变革的推进，逐步开始走向了利用信息化技术促进产业变革的时代，也就是智能化时代。伴随着时代的走向，工业互联网 和 5G网络 逐渐揭开了帷幕，数据不再是单纯的数据信息源，数据可以结合一些可视化界面作为载体，实时地展示反馈出这个世界的变化。在诸多行业上，我们可以通过对数据的管控达到场景设备的维护效果，例如智慧园区、智慧楼宇的建设，水务系统的监控以及一些公共设施风力发电，数据中心可视化系统等等的搭建上，都可以通过可视化的搭载，进行数据的展示和维控。

HT for Web 不止自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎，为可视化提供了丰富的展示效果。今天我们就将使用 Hightopo（以下简称 HT ）的 HT for Web 产品上的 web 组态跟大家介绍一下通过丰富的 2D 组态运用以及动画效果融合搭建的大屏数据可视化系统。

界面简介及效果预览

界面上的图纸是采用 HT 特有的设计，并沿用 HT 的响应式布局来进行划分排版，在无限放大和缩小图片的情况下依然能保持一致的精准度，可以适应不同分辨率的屏幕都不会模糊，不仅可以实现完美的跨平台，在大屏展示上的效果就不言而喻了。而对相应的数据节点以及动画节点做数据绑定，通过对接数据来展示数据可视化系统的运行，加上 HT 的动画函数 ht.Default.startAnim() 来驱动数据变动和动画展示效果。

系统分析

数据可视化的基本思想：

数据可视化技术的基本思想，是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析。

数据可视化的基本手段：

1、数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。

2、数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。

3、数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。 而 HT 拥有一套完整丰富的 2D 组态可供用户快速上手搭建，展示上拥有独特的主题风格设计，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题。通过数据对接的载入，可以搭建出一套完整的数据可视化系统的解决方案，应多各种行业上数据展示的需求。

效果实现

一、主题风格的多样化

HT 的设计上拥有独特的设计风格，拥有多种主题可供选择，大体上不仅有清新简洁的淡色风格，也有酷炫科技的深色风格，搭配上用户的项目需求，可以打造出用户独有专属设计。在动画交互上，HT 的实现跟风格设计上同样地出彩，结合风格上的主题展示，融合出一套适用于各种屏幕下，风格主体鲜明以及动画交互舒适的数据可视化大屏展示。

主题风格的实现，是建立在 HT 特有的图纸设计机制下，在数据可视化系统实施的过程中，可以应用于各种屏幕的分辨率下。比如系统设计过程中，可以在个人电脑的显示器下进行图纸的设计和程序代码的调试开发，而当开发阶段完成后，在现场大屏的布置搭建或者在用户展示的时候，不用去担心关于分辨率的变化会出现的失真模糊的问题，从而在项目的开发和搭建上，用户的使用相对地会简单很多。加上 HT 自身研发的开发插件 API 也同样地易于上手，可以实现解决许多行业上的数据可视化系统的应用。

二、响应式（自适应）布局

布局功能一直是数据可视化大屏的重要功能点之一，舒适的布局界面，可以使人拥有焕然一新的感觉，拥有响应式（自适应）布局的话，可以兼顾各种比例大小下的屏幕，不会因为比例的变化而使得整体的排版错乱。布局功能不仅适用于大屏的整体排版上，在三维场景数据可视化系统搭配的左右系统数据面板上，依然可以使用 2/3D 融合嵌套的形式完成，而在面板的排列上也可以使用 响应式（自适应）布局，可以将搭载的数据充分地显示出来。

但自动布局不是银弹，复杂的情况还是需要手工布局，或业务上做必要的妥协，甚至根据业务编写特殊的排布算法才能达到最佳效果，HT 自身拥有一套适应各种场合的布局机制，可供用户在一些特殊的布局效果上完成特定的布局。

三、动画效果的过渡

不同的动画会添加更多有趣的交互体验，一个舒适的面板交互，也必然离不开动画的实现。优秀的数据可视化系统亦然如此，通过面板搭载数据的呈现，一方面数据的变动驱使动画交互来体现，另一方面动画交互还可以依附在悬浮、点击以及双击等用户体验上来表现，从而达到用户视觉和体检的最大限度提升。

其中动画效果上的实现，可以匹配自己的需求在 HT 原有的动画函数上进行封装，例如实现淡入淡出、裁剪、摇晃、旋转以及数值的跳动等实现效果，我们可以在动画的函数封装上下功夫。

而这些动画主要是通过封装了一个 setValue() 方法来设定动画效果实现的时候，通过属性参数变化的值设定动画运作的效果。其中通过一些参数值的传入，并且根据对 data 节点的类型判断来对应地去设定属性值：

• data：动画执行的节点；

• accessType：动画所涉及的属性类型；

• name：属性名称；

• value：数值的设定；

通过设定动画属性值的封装后，我们可以封装一些动画效果来调用以上 setValue() 的方法来实现许多动画效果。

例如，我们通过封装一个裁剪的动画函数，只需要传入动画节点 data、用户自定义函数 easing 以及时间 duration 来驱使裁剪属性 clip.percentage 在动画设定值的方法调用，就能完成裁剪动画的实现。而在其他的交互动画下也是依靠 HT 的动画函数来封装对应交互动画。

动画的用处是为了使变动的数据视觉上感官，拥有舒适的感觉。而数据的搭载是数据可视化系统最关键的部分，一个解决方案的实施是对于一套行业上用户数据的管理和维护的体现，所以在数据对接的部分是至关重要的，而 HT 的数据搭载可以适应现在所有主流开发的数据对接的方案，不用过多地担心数据对接的问题，只需通过后端平台所采集的数据进行系统数据的接入，就可以使数据可视化嵌入灵魂。

总结

身处大数据时代的我们，有着许多的数据集等着我们去发掘，通过一系列的数据分析，可以明白很多事件发展的趋势走向，不仅可以带来更好的生活体验，也能通过数据预测事件发生的方向。在信息时代发展迅速的前提下，数据是当今重要的信息载体，可以通过数据的捕获，通过监管和维护去了解一个行业下关于工业管控下的数据可视化系统。

HT 在许多行业的经验积累下，以及自主研发并通过不断完善的产品，实现了一套又一套精美的数据可视化解决方案，例如：换热站最酷设计—— Web SCADA 工业组态软件界面，拥有两种不一样的主题风格所搭建，有兴趣的小伙伴可以了解一下有关数据可视化的经典案例。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多新奇的实例，也能发掘出不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时，你也可以查看更多案例及效果：https://www.hightopo.com/demos/index.html