關於使用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獲取第二等份，以此類推......