关于使用ECharts一些基础

前言

ECharts 一个使用 JavaScript 实现的开源可视化库, 在前端我们可以使用这个库绘制各种可视化图表。我们需要掌握一些基本的数据知识，这些基本的数据知识能够帮助我们更好的理解和使用 ECharts

函数

不管你是高中还是大学毕业，对于数学中的函数，应该都是很熟悉的。所谓的函数 其实就是一种映射关系，x 通过一定的转换规则 f 得到 y。其中一个函数包含三个要素 定义域 X、值域 Y 和对应法则 f，我们可使用下面的方式来表示

    y = f(x)    

其中 ,

拿数据可视化来说，我们是不能把数据原封不动的变成图形展示给用户查看。比如一个数据是 10000, 难道我们需要在页面上定义 10000px 的像素的图形给用户么。很明显我们不能这样做。我们需要把这个 10000 进行一系列的转化，变成 100px 或者 10px 或者其他高度。在可视化中，我们追求的不是一个绝对的，而是一个相对的。像这样：A 的数值是 100，B 的数值是 200。现在需要绘制这两个数据的柱状图，我们只需要很明显的告诉我们的用户，B 的高度是 A 的两倍即可。而其中 A 绘制的高度是否为 100px，不是我们需要关心的事情。而函数就是我们对数据进行转换的一个利器，能够帮助我们把数据相对的转化为页面展示的图形

数据类型

在数据可视化中, 数据可以分为 连续型 与 离散型 两种类型

我们怎么去理解这两个数据类型呢。举个例子, 现在我们有某个商品一周的销售额

日期	Mon	Tue	Wed	Thu	Fri	Sat	Sun
销售额	820	932	901	934	1290	1330	1320

上面我们看 日期 这个维度下面，周一，周二，周三，周四 …… 是个整数的单位 (天)，我们无法继续往下划分。
有人会有疑惑，一 天怎么会分不下去呢，一天会有 24 个小时，一个小时会有 60 分钟，分钟到秒，秒到毫秒 …… 明明可以无限分下去。这样说是可以分下去，但是它的维度就不是 日期 了，而是 时刻 了。在 日期 的维度下，最小的整数单位就是天，每一天当做一个离散数据点，这种可以理解为离散型。

继续看我们的表格，在每一个日期的下面，有它所对应的销售额。比如周一的销售额是 820，周二的销售额是 932, 周三的销售额就是 901。这些数据我们无法确定的它的最小维度是多少。它们是存在一个区间中，比如上面的销售额。我们可以理解为[0, + 无穷)。它可以落在这个范围内的任何地方。这种可以认为是连续型。

拿 echart 中最基本的折线图来看：

其中数据的销售额是 连续型 ，从[0-1500] 中，我们从里面找到任意一个数据，都能映射到 Y 轴一个对应的高度。
，并且这个高度是唯一的。我们把其中的销售额作为 x, 高度作为 y，那么函数就是

        y = x * k + d 

其中 x 的定义域就是 [0, 1500], y 的值域就是[0, 图表的高度]。我们已经知道其中的两个点，K 和 d 就能够算出来。
于是，通过上面的函数就能计算出任意一点的高度。

X 轴的日期就是 离散型。总共只有 7 个点，把 X 轴分层 7 个等份，Mon 获取第一等份，Tue 获取第二等份，以此类推 ……