web前端的數(shù)據(jù)可視化趨勢與echarts入門基礎(chǔ)

小編今天跟大家講講近幾年非常熱門的數(shù)據(jù)可視化。特別是在前端崗位上，需要完美的展現(xiàn)出來數(shù)據(jù)和形式上相結(jié)合的美觀，在前端崗位上數(shù)據(jù)可視化的展現(xiàn)就轉(zhuǎn)換成了一些能讓人一眼看過去就能明白要傳遞的信息。因為可視化圖形可以直接給人立體的展現(xiàn)出來數(shù)據(jù)的對比，而且在形式上也會更加的符合審美，能讓人有眼前一亮的感覺，這里先給大家展示幾個常見圖形。

在這個大數(shù)據(jù)時代，數(shù)據(jù)可視化就顯得尤為重要。如果一個網(wǎng)站第一眼看過去，是好看的，才能激發(fā)起接著往下看的欲望。

這個時候就要著重推薦一下echarts，echarts。

它們對于大數(shù)據(jù)的處理能力非常的好，而且圖形的展現(xiàn)也比較美觀，它是一個純Javascript圖表庫，可以流暢的運行在PC端和移動端上，里面包含著柱狀圖、折線圖、餅圖、散點圖、雷達(dá)圖、地圖等多種圖形，并且在兼容性這方面也比較nice，能兼容絕大部分瀏覽器（IE8或以上、chrome、FireFox、360、Safari）。

echarts最方便的地方小編認(rèn)為是每一個實例都是包裝好的，當(dāng)想從一個圖形轉(zhuǎn)換到另外一個圖形，只需要去改變option里的配置項就可以了。

這里僅僅是改變了option下的type的類型，就可以直接的改變一種圖形的展現(xiàn)效果，是不是很方便~所以小編個人也是非常推薦，實用性很強(qiáng)。

接下來講說一下echarts的兩種引入方法。

第一種：直接在echarts官網(wǎng)選擇適合的版本，把壓縮過后的echarts.min.js給下載到本地項目中，直接通過本地靜態(tài)引入。

第二種：通過node.js 的npm命令來獲取echarts。這里小編給大家演示第一種比較好上手的做法。

這里小編是從官網(wǎng)選擇的4.5.0版本的文件下載到本地，直接通過script標(biāo)簽來引入本地的靜態(tài)資源。

這里小編用折線圖來舉一個小的例子~

首先是創(chuàng)造一個指定大小的容器來盛放echarts圖表。接下來是echarts.init()初始化到剛才創(chuàng)建的那個容器當(dāng)中。然后聲明一個變量option 來寫配置項。最后把寫好的配置項通過setOption方法來運行。

效果圖

這其實就是一個最簡單的折線圖的效果圖~是不是可以很直觀的對比出兩年當(dāng)中每個月的數(shù)據(jù)對比，在樣式方面也相對比較自由，可以根據(jù)文檔里的各個配置項來設(shè)定x軸、y軸上的字體、顏色、大小，或者是圖例的形狀，陰影也都可以自己設(shè)定。

這里小編隨便給大家換一種顏色和添加一個自定義的陰影度，然后改變了一下圖例的形狀給大家看一下~

echarts這里其實提供了非常全面且豐富的自定義配置選項?？梢园逊彪s的數(shù)據(jù)轉(zhuǎn)換成顯而易見的圖形信息被人所吸收?，F(xiàn)在大家有沒有愛上這款可視化的控件~