数据可视化

数据可视化简单说就是把数据通过图标的形式展示。

数据可视化的意义，数据可视化的图表展示只是一个结果，更重要的是从获取数据到展示图表之间的过程，这个过程是找到有效的、重要的数据的过程，即为什么展示、展示什么，以什么形式展示。

虽然说只要是数据就能用任意一种图表展示，但是不同维度、不同格式的数据在使用不同类型的图标展示时的效果天差地别。

因此，数据可视化的重点在于对数据的清理和分类的过程，使用图表展示只是一种工具，不管是是使用HeightCharts、Echarts或者其他的图表制作软件展示都一样。

作为程序员似乎比较热衷于使用编程语言来实现几乎所有遇到的需求或任务。因此，学习Echarts作为一种数据可视化的工具。

Echarts的特性

（1）可视化类型丰富

ECharts提供了很多图的实现方式，包括折线图、柱状图、散点图、饼图、K线图、箱线图、地图、热力图、线图、关系图、矩形树图、旭日图、漏斗图、仪表盘等。

（2）支持多种数据格式

在ECharts 4.0以上版本，ECharts的dataset属性支持传入的数据格式除了二维表，还有键值对等。

（3）千万数据前端流畅展现

ECharts 4.0以上版本的增强渲染技术实现了千万数据量展现时仍然可流畅交互，如缩放和平移等操作。对流加载的支持使数据可以分块加载与渲染，用户体验更佳。

（4）动态数据的动画展示

当数据变化时，ECharts通过内部合适的动画变化展现出新数据的可视化，常常配合时间序列数据展现，如图1-4所示。

（5）更多、更强大的三维可视化

ECharts提供了ECharts GL，可以实现三维地球、建筑等可视化效果，可应用在VR、大屏场景中，效果更加酷炫，如图1-5所示。

（6）跨平台适用

ECharts具有不同的渲染方案，可以在不同平台良好适配。例如，ECharts 4.0以上版本的SVG渲染使得移动端无须担忧内存，Canvas渲染使PC端可以展现大数据量的特效，且ECharts 4.0开始适配微信小程序。

（7）数据深度探索

ECharts支持用户交互挖掘数据中的信息，同时提供图例、视觉映射、数据区域缩放等便捷的交互组件，使用户可以从总览开始挖掘数据展示的细节。

（8）无障碍访问

ECharts 4.0遵从W3C制定的无障碍富互联网应用规范集，支持对可视化生成描述，使盲人可以通过语音了解图表的内容。

ECharts VS HeightCharts

相同点

目前ECharts和Highcharts的官网展示的共有可视化图表包括折线图、面积图、柱状图、条形图、饼图、环形图、散点图、气泡图、仪表图、关系图、热力图、矩形树图、雷达图、玫瑰图、箱线图、瀑布图、漏斗图、词云图（ECharts 2.0官网展示）、直方图、甘特图、桑基图、河流图、和弦图、误差图、混合图、3D图、地图（Highmaps展示）等。

不同点

ECharts官网还展示了树图、路径图、旭日图、象形柱图、日历坐标系等。而Highcharts官网还展示了子弹图、蜂巢图等。

ECharts可免费使用，Highcharts在个人学习、个人网站和非商业用途使用时免费，在供商业使用时需要付费。

最新的ECharts支持Canvas和SVG两种渲染方式，Highcharts支持SVG渲染方式。

Echarts相关概念

标题

标题指的是在图标最上方显示的文本，在Echarts中标题分为主标题和副标题，都配置在title属性中

title:{
	text:'主标题',
	subText:'副标题'
}

提示框

提示框指的是当鼠标悬浮或点击某一系列的数据是现实的文本框，在tooltip属性中配置。

在ECharts中，提示框组件称为tooltip，它的作用是在合适的时机向用户提供相关信息。

工具栏

工具栏指的是在图标标题旁边显示的具有不同功能的按钮组成的一块区域。

在ECharts中，工具栏组件称为toolbox。
通过设置工具栏，我们可以将可视化下载到本地，或者查看可视化的底层数据等。

图例

图例指的是不同数据在图表中的显示标记所组成的一块区域。

在ECharts中，图例组件称为legend，其作用是区分不同的数据展示。

时间轴

时间轴指的是由一系列时间所组成的线。点击线上的某个点会显示当前时间点的数据。在Echarts中时间轴被称为timeline。

在使用方法上，timeline和之前介绍的组件略有差异，使用时会存在多个option，可以将ECharts传统的option称为原子option，将使用timeline时用到的option称为包含多个原子option的复合option。

数据区域缩放

数据区域缩放指的是数据显示的区域会根据缩放比例的大小而变化。
在ECharts中，数据区域缩放组件称为dataZoom，它的作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节。

网格

网格指的是图表所在的区域。
在Echarts中网格被称为grid，可以通过grid在可视化坐标系中控制可视化展示时的网格大小。

常用的参数除了之前提到的位置参数，如left、top、right、bottom等，还有width（grid组件的宽度）、height（组件的高度），两者默认的参数都是auto，即自适应，当然也可以指定具体数值。

坐标轴

坐标轴指的是数据在网格中显示的位置的参数所构成的两条线。

一般来说，我们最常用的坐标轴是直角坐标系，尤其是二维的直角坐标系，所以横轴（xAxis）和纵轴（yAxis）最常被使用。

在Echarts中不是所有的图表都有坐标轴。

数据系列

数据系列指的是同一维度的一个或多个数据，在Echarts中数据系列被称为series。

一个图表可能包含多个系列，每一个系列可能包含多个数据，所以数据系列（series）主要作为数据的容器。

对于每种可视化图表，series的形式并不完全相同。

全局字体样式

全局字体样式指的是全局设置的字体的样式，包括字体族，颜色，大小等。

在制作可视化时，常常会用到文字展示，此时选择一种合适字体的样式与可视化搭配显得尤为重要。