数据可视化大屏选型调研报告

比眉伴天荒 2023-07-14 08:26 50阅读 0赞

# 1 需求背景分析 #

数据可视化要根据数据的特性，可视化要根据数据的特性，如时间信息和空间信息等，找到合适的可视化方式，例如图表(Chart)、图(Diagram)和地图(Map)等，将数据直观地展现出来，以帮助人们理解数据，同时找出包含在海量数据中的规律或者信息。数据可视化是大数据生命周期管理的最后一步，也是最重要的一步。

数据可视化起源于图形学、计算机图形学、人工智能、科学可视化以及用户界面等领域的相互促进和发展，是当前计算机科学的一个重要研究方向，它利用计算机对抽象信息进行直观的表示，以利于快速检索信息和增强认知能力。 数据可视化系统并不是为了展示用户的已知的数据之间的规律，而是为了帮助用户通过认知数据，有新的发现，发现这些数据所反映的实质。

大数据时代，大规模、高纬度、非结构化数据层出不穷，要将这样的数据以可视化形式完美的展示出来, 传统的显示技术已很难满足这样的需求。而高分高清大屏幕拼接可视化技术，也就是大屏技术正是为解决这一问题而发展起来的, 它具有超大画面、纯真彩色、高亮度、高分辨率等显示优势, 结合数据实时渲染技术、GIS空间数据可视化技术，实现数据实时图形可视化、场景化以及实时交互，让使用者更加方便地进行数据的理解和空间知识的呈现，可应用于指挥监控、视景仿真及三维交互等众多领域。

# 2 框架介绍与对比分析 #

目前业界用的比较多的两款开源图表框架是 ECharts与 Highcharts。下面分别对其进行介绍。

## 2.1 Echarts ##

ECharts，是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。

特性如下：

1.  丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，此外还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

1.  多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。 为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

TypedArray是一种通用的固定长度缓冲区类型，允许读取缓冲区中的二进制数据。

1.  千万数据的前端展现

通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。

1.  移动端优化

ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

1.  多渲染方案

ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。VML 可以兼容低版本 IE，SVG 使得移动端不再为内存担忧，Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择，使得 ECharts 在各种场景下都有更好的表现。

1.  支持多维数据

除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。

1.  动态数据

ECharts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

1.  绚丽的特效

ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

1.  三维可视化

ECharts 提供了基于 WebGL 的 ECharts GL，我们可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球，建筑群，人口分布的柱状图。

## 2.2 Highcharts ##

Highcharts是使用纯 JavaScript 实现的交互性图表框架，号称在全球百强企业中，有72家企业（比如 facebook、twitter、华为、京东、阿里云等）使用了这套框架。

Highcharts 还包含一款名为Highmaps 的HTML5 地图组件，支持下钻，触摸、手势操作，利用它可以方便快捷地创建用于展示销售、选举结果等其他与地理位置关系密切的交互地图图表。Highmaps 可以单独使用也可以作为 Highcharts 的一个组件来使用。

Highcharts 包含以下特性：

1.  丰富的可视化类型

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。Highstock 则提供股票走势图（K线、分时）、高级时间轴图，Highmaps 提供各种丰富多样的地图。

1.  兼容性

Highcharts 可以在所有的移动设备及电脑上的浏览器中使用，包括 iPhone，iPad 和 IE6 以上的版本，在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能，因而可以提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制，在低版本 IE 则使用 VML 进行图形绘制。

1.  非商业使用免费

在个人网站、学校网站及非盈利机构中可以直接使用 Highcharts。

**商业用途的项目、政府项目（项目包括网站、内部应用或其他项目）都需要购买授权。**[https://highcharts.com.cn/highcharts][https_highcharts.com.cn_highcharts]

1.  开源

Highcharts 最重要的特点之一就是：无论免费版还是付费版，都可以下载源码并可以对其进行编辑。

1.  纯 JavaScript

Highcharts 完全基于 HTML5 技术，只需要两个 JS 文件即可运行。

1.  简单的配置语法

在 Highcharts 中设置配置选项不需要任何高级的编程技术，所有的配置都是 JSON 对象，只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写，同时也易于机器解析和生成的特点。

1.  动态交互性

Highcharts 支持丰富交互性，在图表创建完毕后，可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。 结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。

1.  支持多坐标轴

多个数据进行对比这是非常常见的需求，Highcharts 可以让我们为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。

1.  数据提示框

当鼠标划过图形时，Highcharts 可以将数据点或数据列的信息展示在提示框中，并且提示框会跟随用户的鼠标；而且可以智能的显示离鼠标最近的点或被遮盖点的信息。

1.  时间轴

75% 的直角坐标系（包含 X轴 和 Y轴）图表中是时间轴图表，因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位，可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。

1.  导出和打印

Highcharts 支持导出功能，用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件，通过插件可以实现导出为 Excel 文件功能；另外，用户还可以从网页上直接打印图表。

1.  缩放和钻取

通过缩放可以方便的查看不同范围的数据；通过钻取可以方便的查看不同级别的详细数据。

1.  方便加载外部数据

Highcharts 的数据是 JavaScript 数组或对象，这些数据可以是本地的配置对象，独立的数据文件（JSON、CVS）甚至是不同的网站上定义。另外，这些数据可以用任何形式处理好并加载到 Highcharts 中。

1.  仪表图

仪表图对于 Dashboard 来说特别理想，这种图表就像速度计一样，一眼就可以轻松阅读。

1.  极地图

折线图、面积图、柱形图等图形可以通过一个简单的配置转换成极地图、雷达图。

1.  图表或坐标轴反转

Highcharts 支持图表反转（X 轴或 Y轴对调），这样 X轴是垂直的，方便进行数据对比；坐标轴旋转则可以坐标轴的最大值和最小值显示对调。

1.  文本旋转

图表中所有的文本，包括坐标轴标签、数据标签等都可以进行任意角度旋转。

## 2.3 横向比较 ##

### 2.3.1 特性比较 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">特性</th> 
   <th align="left">Echarts</th> 
   <th align="left">Highcharts</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">可视化类型数</td> 
   <td align="left">折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、漏斗图，仪表盘等。除此之外，还支持几种特色类型图，比如树图、路径图、旭日图、桑基图、日历坐标系等。</td> 
   <td align="left">折线图及曲线图、面积图、柱状图及条形图、饼图及环形图、散点图及气泡图、仪表图、关系图、地图等。除此之外，还支持23种特色类型图，比如词云图、甘特图、时序图、贝尔曲线图、极地图等。</td> 
  </tr> 
  <tr> 
   <td align="center">图形颜色主题数</td> 
   <td align="left">3</td> 
   <td align="left">10</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持图与图之间的混搭</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持 3D图</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">多种数据格式</td> 
   <td align="left">二维表，key-value、GeoJSON 格式数据、TypedArray 格式数据。</td> 
   <td align="left">JavaScript 数组或对象、GeoJSON 格式数据。</td> 
  </tr> 
  <tr> 
   <td align="center">地图是否支持流加载</td> 
   <td align="left">√</td> 
   <td align="left">-</td> 
  </tr> 
  <tr> 
   <td align="center">移动端优化</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">多渲染方案</td> 
   <td align="left">Canvas、SVG（4.0+）、VML</td> 
   <td align="left">SVG（4.0+）、VML</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持多维数据</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持数据动态展示</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持缩放</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持坐标轴反转</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持文本旋转</td> 
   <td align="left">√</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">是否支持导出与打印</td> 
   <td align="left">-</td> 
   <td align="left">√</td> 
  </tr> 
  <tr> 
   <td align="center">文档是否详细</td> 
   <td align="left">一般</td> 
   <td align="left">详细</td> 
  </tr> 
  <tr> 
   <td align="center">示例是否详细</td> 
   <td align="left">一般</td> 
   <td align="left">详细</td> 
  </tr> 
  <tr> 
   <td align="center">商业化是否需要授权使用</td> 
   <td align="left">-</td> 
   <td align="left">√</td> 
  </tr> 
 </tbody> 
</table>

相对来说，Highcharts支持的可视化类型数更多。但对于某些类别的图形种类来说，比如散点图，Echarts 支持 24 种散点图；而 Highcharts 只有 7 种。也就是说，Highcharts 提供的类型比较广，而Echarts 在某些类别上形式比较多样。

Highcharts 还有专门的股票图表控件叫HIGHSTOCK， 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图（OHLC）、K线图、标签图、面积范围图、柱形范围图等多种图表。

Echarts 的百度前端技术部开发维护的，所以在地图领域较具有优势。

而 Highcharts 是整家公司在开发维护，所以算是目前世界上图表领域的领头羊。但需要授权（[https://highcharts.com.cn/highcharts），一个项目，2][https_highcharts.com.cn_highcharts_2]个开发，大概 8000左右。授权后还提供高级技术支持，比如主版本更新升级服务、一对一技术支持服务、7 \* 24 小时紧急响应等等。

### 2.3.2 数据比较 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">图表框架</th> 
   <th align="center">Github 评星数</th> 
   <th align="center">npm 下载数（平均每周）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">ECharts</td> 
   <td align="center">39.8k</td> 
   <td align="center">183,103</td> 
  </tr> 
  <tr> 
   <td align="center">Highcharts</td> 
   <td align="center">9.3k</td> 
   <td align="center">607,755</td> 
  </tr> 
 </tbody> 
</table>

GitHub是一个面向开源及私有软件项目的托管平台。

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 我们可以安装、共享、分发代码,管理项目依赖关系。

通过 Github 评星数与npm 下载数，可以从数据角度分析出这些框架的流行度。相对来说，npm 下载数更实在一些。Highcharts 的每周下载量是 ECharts 3 倍以上，具有绝对优势。

### 2.3.3 网上案例 ###

某国字头物流中心项目，拥有很多图形化报表、算法复杂，开始使用 Echarts，团队成员曾一度不想继续干下去（bug 多、文档、实例问题）。后来采用 Highcharts 重写。

# 3 结论 #

*  项目涉及到的图表比较简单并且图少，建议采用 ECharts。
 *  项目涉及到的图表复杂并且图多，建议投入预算，采用 Highcharts。

[https_highcharts.com.cn_highcharts]: https://highcharts.com.cn/highcharts
[https_highcharts.com.cn_highcharts_2]: https://highcharts.com.cn/highcharts%EF%BC%89%EF%BC%8C%E4%B8%80%E4%B8%AA%E9%A1%B9%E7%9B%AE%EF%BC%8C2