关于使用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获取第二等份，以此类推......