01 前言
现如今大数据无处不在，随着物联网、5G等技术的发展，工业大数据更是发展的如火如荼，数据可视化也应运而生，那什么是数据可视化呢?
数据可视化
把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段就叫做数据可视化。
数据可视化的本质
数据可视化的本质就是以图形方式呈现结构化或非结构化数据，是抽象数据的具象表达。
数据可视化的作用
随着智能设备的应用，每个车间每台设备的数据量都呈指数级增长，想要在如此庞大的数据之间寻找规律和关联并不容易，但图形和图表可以将复杂抽象的数据，转化为可见的图形符号，直接清晰地表达出来，帮助人员快速发现关键点。
02 基于WEB的数据可视化的优势
数据可视化的实现方式多种多样，有传统的C/S架构，也有基于WEB技术的B/S架构，每种实现方式都有自己独特的优势。基于WEB技术的数据可视化有以下几点优势：
可跨平台和系统
支持MAC、Linux、Windows、手机、pad等多种操作系统和终端。
丰富的开源组件
大量的优秀开源组件，使得开发难度降低，数据展示方式多样。
使用便捷
快速部署、易于扩展、易于运维。
03 开发工具
原生开发：HTML5、CSS3、JS
开发框架：React、Vue、Angular等
图表类：Echarts、Highcharts、DataV、D3.js、AntV-G6等
3D和地理：Three.js、Webgl、Mapbox、 AntV G2 和 L7等
04 开发设计流程
确定数据可视化的主题
数据可视化设计要避免为了展示而展示，排版布局、图表选用等应服务于业务需求，所以第一步必须要明确业务运营中的具体场景和遇到的实际问题，确定数据可视化的主题。
提炼可视化主题的数据
在第一步明确需求，确定数据可视化的主题后，需要根据业务场景抽取关键指标。核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。
主要指标：位于屏幕中央，多为动态丰富的地图或模型。
次要指标：位于屏幕两侧，多为各类图表。
辅助指标：主要指标的补充信息，可不显示或在鼠标移入或点击时显示。
根据数据指标确定图表
在确定好数据分析的维度和排版布局后，我们就可以根据不同的数据优先级和类型选用合适的图表。数据可视化常用的图表，包括折线图、柱状图、饼图、散点图、雷达图、统计地图、仪表盘、漏斗图等，想要熟练应用统计图，需要先了解各类型统计图的含义、作用和使用场景，这样才能不仅满足需求，更能满足审美及行业或学科的特性。下面我们介绍一些常用的图表。
折线图
折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势，例如：车间电量消耗、碳排放分析等可以应用折线图。
柱状图
柱状图(或称条形图)是一种通过柱形的高度(横向的情况下则是宽度)来表现数据大小的一种常用图表类型。通过对数据的分类组合，可以出现多个长方形为一组、且每组内的指标变量一致的柱状图，柱状图可以把每个颜色长方形的高低长短直观的展示出来。因此，柱状图最大的作用就在于它能够显示各组之间的比较情况，例如工厂的水电燃气使用情况就可以使用柱状图来统计。
饼图
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据的比例，饼图更适合表现数据相对于总数的百分比等关系，它的价值在于能够快速了解分类数据的占比情况，可以观察哪类数据占比多，哪类数据占比小。如果只是表示不同类目数据间的大小，建议使用 柱状图，人们对于微小的弧度差别相比于微小的长度差别更不敏感。
雷达图
雷达图主要用于表现多变量的数据，比如各个区域的能耗分析。雷达图以其独特的形式将多个指标呈现在一个图形中，形成了一个多边形的边界。每个指标对应于多边形的一个顶点，用来判断同一个对象的多个指标之间的强弱和差异。
桑葚图
是一种特殊的流图(可以看作是有向无环图)。它用来描述流动情况，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分等数据的可视化分析。
05 小结
本文主要讲解了基于WEB的数据可视化开发工具和开发流程，介绍了几个常用图表的作用和使用场景，纵观本文提到的各种图表以及其他未提及的图表类型都有通用的样式，本质上就是分析-处理-生成三步。我们需要更多考虑的是如何选择常用图表来呈现数据，达到数据可视化的目标，基本方法总结起来就是四步：明确需求-提炼数据-选择图表-展示关键信息。
（来源：菲尼克斯自动化）
京公网安备 11011202001138号
