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 等多种渲染方式。
特性如下：
- 丰富的可视化类型
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，此外还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
- 多种数据格式无需转换直接使用
ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。 为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。
TypedArray是一种通用的固定长度缓冲区类型，允许读取缓冲区中的二进制数据。
- 千万数据的前端展现
通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。
- 移动端优化
ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
- 多渲染方案
ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。VML 可以兼容低版本 IE，SVG 使得移动端不再为内存担忧，Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择，使得 ECharts 在各种场景下都有更好的表现。
- 支持多维数据
除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。
- 动态数据
ECharts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
- 绚丽的特效
ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
- 三维可视化
ECharts 提供了基于 WebGL 的 ECharts GL，我们可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球，建筑群，人口分布的柱状图。
2.2 Highcharts
Highcharts是使用纯 JavaScript 实现的交互性图表框架，号称在全球百强企业中，有72家企业（比如 facebook、twitter、华为、京东、阿里云等）使用了这套框架。
Highcharts 还包含一款名为Highmaps 的HTML5 地图组件，支持下钻，触摸、手势操作，利用它可以方便快捷地创建用于展示销售、选举结果等其他与地理位置关系密切的交互地图图表。Highmaps 可以单独使用也可以作为 Highcharts 的一个组件来使用。
Highcharts 包含以下特性：
- 丰富的可视化类型
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。Highstock 则提供股票走势图（K线、分时）、高级时间轴图，Highmaps 提供各种丰富多样的地图。
- 兼容性
Highcharts 可以在所有的移动设备及电脑上的浏览器中使用，包括 iPhone，iPad 和 IE6 以上的版本，在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能，因而可以提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制，在低版本 IE 则使用 VML 进行图形绘制。
- 非商业使用免费
在个人网站、学校网站及非盈利机构中可以直接使用 Highcharts。
商业用途的项目、政府项目（项目包括网站、内部应用或其他项目）都需要购买授权。https://highcharts.com.cn/highcharts
- 开源
Highcharts 最重要的特点之一就是：无论免费版还是付费版，都可以下载源码并可以对其进行编辑。
- 纯 JavaScript
Highcharts 完全基于 HTML5 技术，只需要两个 JS 文件即可运行。
- 简单的配置语法
在 Highcharts 中设置配置选项不需要任何高级的编程技术，所有的配置都是 JSON 对象，只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写，同时也易于机器解析和生成的特点。
- 动态交互性
Highcharts 支持丰富交互性，在图表创建完毕后，可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。 结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。
- 支持多坐标轴
多个数据进行对比这是非常常见的需求，Highcharts 可以让我们为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。
- 数据提示框
当鼠标划过图形时，Highcharts 可以将数据点或数据列的信息展示在提示框中，并且提示框会跟随用户的鼠标；而且可以智能的显示离鼠标最近的点或被遮盖点的信息。
- 时间轴
75% 的直角坐标系（包含 X轴 和 Y轴）图表中是时间轴图表，因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位，可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。
- 导出和打印
Highcharts 支持导出功能，用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件，通过插件可以实现导出为 Excel 文件功能；另外，用户还可以从网页上直接打印图表。
- 缩放和钻取
通过缩放可以方便的查看不同范围的数据；通过钻取可以方便的查看不同级别的详细数据。
- 方便加载外部数据
Highcharts 的数据是 JavaScript 数组或对象，这些数据可以是本地的配置对象，独立的数据文件（JSON、CVS）甚至是不同的网站上定义。另外，这些数据可以用任何形式处理好并加载到 Highcharts 中。
- 仪表图
仪表图对于 Dashboard 来说特别理想，这种图表就像速度计一样，一眼就可以轻松阅读。
- 极地图
折线图、面积图、柱形图等图形可以通过一个简单的配置转换成极地图、雷达图。
- 图表或坐标轴反转
Highcharts 支持图表反转（X 轴或 Y轴对调），这样 X轴是垂直的，方便进行数据对比；坐标轴旋转则可以坐标轴的最大值和最小值显示对调。
- 文本旋转
图表中所有的文本，包括坐标轴标签、数据标签等都可以进行任意角度旋转。
2.3 横向比较
2.3.1 特性比较
| 特性 | Echarts | Highcharts |
|---|---|---|
| 可视化类型数 | 折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、漏斗图，仪表盘等。除此之外，还支持几种特色类型图，比如树图、路径图、旭日图、桑基图、日历坐标系等。 | 折线图及曲线图、面积图、柱状图及条形图、饼图及环形图、散点图及气泡图、仪表图、关系图、地图等。除此之外，还支持23种特色类型图，比如词云图、甘特图、时序图、贝尔曲线图、极地图等。 |
| 图形颜色主题数 | 3 | 10 |
| 是否支持图与图之间的混搭 | √ | √ |
| 是否支持 3D图 | √ | √ |
| 多种数据格式 | 二维表，key-value、GeoJSON 格式数据、TypedArray 格式数据。 | JavaScript 数组或对象、GeoJSON 格式数据。 |
| 地图是否支持流加载 | √ | - |
| 移动端优化 | √ | √ |
| 多渲染方案 | Canvas、SVG（4.0+）、VML | SVG（4.0+）、VML |
| 是否支持多维数据 | √ | √ |
| 是否支持数据动态展示 | √ | √ |
| 是否支持缩放 | √ | √ |
| 是否支持坐标轴反转 | √ | √ |
| 是否支持文本旋转 | √ | √ |
| 是否支持导出与打印 | - | √ |
| 文档是否详细 | 一般 | 详细 |
| 示例是否详细 | 一般 | 详细 |
| 商业化是否需要授权使用 | - | √ |
相对来说，Highcharts支持的可视化类型数更多。但对于某些类别的图形种类来说，比如散点图，Echarts 支持 24 种散点图；而 Highcharts 只有 7 种。也就是说，Highcharts 提供的类型比较广，而Echarts 在某些类别上形式比较多样。
Highcharts 还有专门的股票图表控件叫HIGHSTOCK， 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图（OHLC）、K线图、标签图、面积范围图、柱形范围图等多种图表。
Echarts 的百度前端技术部开发维护的，所以在地图领域较具有优势。
而 Highcharts 是整家公司在开发维护，所以算是目前世界上图表领域的领头羊。但需要授权（https://highcharts.com.cn/highcharts），一个项目，2个开发，大概 8000左右。授权后还提供高级技术支持，比如主版本更新升级服务、一对一技术支持服务、7 * 24 小时紧急响应等等。
2.3.2 数据比较
| 图表框架 | Github 评星数 | npm 下载数（平均每周） |
|---|---|---|
| ECharts | 39.8k | 183,103 |
| Highcharts | 9.3k | 607,755 |
GitHub是一个面向开源及私有软件项目的托管平台。
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 我们可以安装、共享、分发代码,管理项目依赖关系。
通过 Github 评星数与npm 下载数，可以从数据角度分析出这些框架的流行度。相对来说，npm 下载数更实在一些。Highcharts 的每周下载量是 ECharts 3 倍以上，具有绝对优势。
2.3.3 网上案例
某国字头物流中心项目，拥有很多图形化报表、算法复杂，开始使用 Echarts，团队成员曾一度不想继续干下去（bug 多、文档、实例问题）。后来采用 Highcharts 重写。
3 结论
项目涉及到的图表比较简单并且图少，建议采用 ECharts。
项目涉及到的图表复杂并且图多，建议投入预算，采用 Highcharts。
