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

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

這個(gè)時(shí)候就要著重推薦一下echarts，echarts。

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

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

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

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

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

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

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

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

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

效果圖

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

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

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