【前端酷站】分享一個純 Javascript 的圖表庫與立體畫素風製作~

weixin_34037977發表於2017-10-26

今天小編為大家推薦一個神奇的酷站。ECharts,一個純 Javascript 的圖表庫。

 

以下是各個幾個不錯的介面的介紹:

首頁: http://echarts.baidu.com/

在首頁有完整的說明,也專門的例子進行講解,如果有一定前端基礎,可以很快上手。而沒有經驗的,照模畫樣也可以弄出來。

 

一般例子: http://echarts.baidu.com/echarts2/doc/example.html

一般性的例子裡面包含了常用的一般性表格,點選進去就可以看到程式碼。修改後點選重新整理就能得到修改後的樣子

 

特別例子: http://echarts.baidu.com/examples.html#chart-type-graph
畫廊: http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

在特別例子和畫廊裡,有官方的精美例子,而Gallery裡面則是使用者自己製作的一些精美圖形來進行分享。你所需要做的,就是過去拷貝程式碼拿來用。

 


 

大家可以欣賞欣賞特效案例:




 

 

 


 

 


還可以進行立體畫素風案例製作:

選一張色彩豐富的顏料圖作為原始素材



接下來就是見證奇蹟的時刻~

 

 

可以通過滑鼠拖動來改變視角,通過滾輪來放大縮小影象~~




是不是超酷呢?再調整一下引數試試~~

 

簡直整容術~~再稍微調整一下,然後只需要在畫面中心右鍵,圖片另存為,大功告成~~

 

 


 

ECharts 好處:

1、開源軟體,並且我們提供了非常炫酷的圖形介面,特色是地圖,另外還提供了柱狀圖、折線圖、餅圖、氣泡圖及四象限圖等;

2,使用簡單,在官網中為我們封裝了js,只要會引用就會得到完美的展示效果;

3,種類多,echarts實現簡單,各類圖形都有;相應的模板,還有豐富的API及文件說明,非常詳細;

4,相容性好,基於html5,有著良好的動畫渲染效果。

 

怎麼樣 是不是非常有用啊~~?小編雖然對前端的程式碼不是特別懂,但看到Echarts提供的豐富的圖表型別後瞬間樂開花哈哈,強大的資料視覺化功能,對學數學的我非常有幫助吶啦啦啦~~~這個站是不是對你也很有幫助哇,哈哈歡迎給我留言一起討論呦~~~

 

相關文章