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

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

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

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

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

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

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

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

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

這里小編是從官網選擇的4.5.0版本的文件下載到本地，直接通過script標簽來引入本地的靜態資源。

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

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

效果圖

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

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

echarts這里其實提供了非常全面且豐富的自定義配置選項。可以把繁雜的數據轉換成顯而易見的圖形信息被人所吸收。現在大家有沒有愛上這款可視化的控件~