前端圖表外掛ECharts入門教程

傳智黑馬發表於2020-12-09

在前端專案開發中,有很多地方會遇到繪製圖表的需求,一般的圖表可以透過canvas來繪製,但是遇到複雜一點的圖表怎麼辦呢?不要慌,在下今天就給大家推薦一個前端大佬們用的非常火的圖表外掛——ECharts。

ECharts特性簡介

ECharts是一個使用 JavaScript 實現的開源視覺化庫 ,啥叫開源呢,通俗點說,就是免費!不要錢!小夥伴們可以大膽放心的使用,視覺化工具呢,就是將一系列的資料,轉化成非常直觀的圖表,來供大家檢視,ECharts可謂是製作圖表的良心之選,並且可以流暢的執行在 PC 和移動裝置上,相容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),所以,基本完全不用擔心相容性的問題,底層依賴輕量級的向量圖形庫 ZRender,提供直觀,互動豐富,可高度個性化定製的資料視覺化圖表。 。

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理資料視覺化的地圖、熱力圖、線圖,用於關係資料視覺化的關係圖、treemap、旭日圖,多維資料視覺化的平行座標,還有用於 BI 的漏斗圖,儀表盤,並且支援圖與圖之間的混搭。

具體的還有的優點,我就不一一介紹了,需要用到更多功能的小夥伴呢,可以去ECharts官網查詢更多的特性()。

ECharts的下載

在使用ECharts之前呢,我們需要先去官網下載最新版本的ECharts的依賴包(),在這呢,我推薦大家下載原始碼,因為你原始碼裡面包含了所有圖表元件以及常見的警告和錯誤.如果你覺得原始碼檔案太大,而且專案中用到的圖表功能很簡單的話呢,那就使用精簡版的好啦。

ECharts的下載01

ECharts在普通專案中的使用

下面呢,重點來啦,大家準備好編譯器哈,準備和小編一起完成圖表程式碼的實現啊.

首先呢,給大家講一下ECharts圖表在普通專案中的使用,後面還會講到如何在vue專案裡面使用,其他的開源框架裡面如何使用我就不一一講解了哈。

第一步

老規矩,首先將下載好的ECharts.js放在專案的js資料夾下面,之後呢,在需要用到的頁面,引入,然後就可以開始寫程式碼啦。

第二步

準備好一個dom元素,當然啦,需要給該dom元素一個id,方便我們去找到它,而且,還要給這個元素一個寬高,作為表格的視口,至於寬高給多少呢,各位大佬們高興就好。

第三步

開始寫js程式碼啦,js程式碼有三個步驟:

FIRST

初始化ECharts例項:

SECOND

指定圖表的配置項和資料:

THIRD

使用剛指定的配置項和資料顯示圖表:

這樣子就OK啦,在瀏覽器開啟你的程式碼吧,我們就得到了一個帶動畫效果的柱狀圖哦。

ECharts入門示例02

當然,不只是只有柱狀圖,還有各種其他的圖表,怎麼使用呢,首先點選例項,我們就來到了這個頁面。

ECharts03

看上哪個圖表了嗎?不要猶豫啦,點選進去,我們就來到了如下頁面

ECharts04

然後複製左邊的option程式碼,替換掉之前的第二步裡面的option就可以啊,第一步和第三步是通用的,不需要修改;

圖表裡面的資料也是可以自定義的,比如想渲染透過ajax請求過來的資料的話,直接在ajax的回撥函式里面直接給option賦值或者修改就可以啦; 那麼,關於ECharts圖表在普通專案中的使用就講到這裡啦,下面就給大家演示一下,如何在vue-cli 3.0裡面的應用;

ECharts在vue-cli 3.3.0中的使用

ECharts不止是在vue-cli 3.3.0專案中可以使用,在其他版本的vue裡面同樣可以使用,因為vue-cli已經更新到了3.3.0,所以我們今天用這個版本作為例子來給大家演示.

第一步

第一步呢,肯定是要先搭建vue-cli的專案啦,首先呢你需要有node的執行環境,這裡我就預設大家都有啦,首先呢安裝vue-cli的全域性環境npm install -g @vue/cli,裝好之後呢,嘗輸入命令vue --version,如果出現了3.3.0字樣,就說明安裝成功啦,如果報錯vue不是內部命令的話呢,就是安裝失敗了,那就有可能是你沒有裝node環境,或者node版本過低哦,vue-cli需要 node 8.9 或更高版本 (推薦 8.11.0+),這時候你就需要裝一個更高版本的node啦;vue-cli環境搭建好之後呢,就開始建立vue的專案啦,也很簡單,新建一個資料夾,然後輸入指令vue create hello-world,就可以建立好一個vue的初始化專案啦.專案初始化之後呢,安裝ECharts依賴包npm install ECharts -S,就可以開始寫程式碼啦

第二步

在main.js裡面匯入ECharts依賴包,再將ECharts例項化函式設為vue的原型函式,便於全域性訪問,程式碼如下圖:

ECharts05

第三步

然後在HelloWorld.vue的template裡面新增標籤;

script裡面程式碼如下:

ECharts06

當然也有別的不同的寫法,但是我覺得,這是我研究了很久出來的一套比較合理的寫法,資料option放在data裡面,初始化圖表的drawCharts方法放在methods裡面,然後呢方法為什麼要在mounted生命週期函式里面呼叫呢?直接在methods裡面呼叫不行嗎?是不行的,因為我們在初始化的時候操作了dom元素,而mounted宣告週期函式是在頁面中的dom元素載入完畢之後才執行的而函式,所以在mounted裡面呼叫drawCharts方法就不會出現找不到dom元素的情況啦,vue裡面是拒絕操作dom元素的,但是呢,這個外掛沒有辦法,必須選中dom元素初始化才可以,所以這裡是一點小瑕疵,希望ECharts團隊可以更加的最佳化一下,最後呢,大家npm run serve一哈,哈哈哈哈哈,是不是有圖表出來啦.

結語

這個文件主要是針對圖表外掛ECharts寫的一個解析,大部分的東西呢,在ECharts官方文件裡面都有,但是官方文件上面有的坑它並沒有說出來,我就把我在用這個外掛時遇到的坑,還有自己對這個外掛的一點點理解毫無保留的獻給大家,希望大家在要用到ECharts這個外掛的時候呢,能耐心的看看我這個文件,也希望這個文件對大家有所幫助。也許搜尋我的ID就有你想要的;


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69915785/viewspace-2740788/,如需轉載,請註明出處,否則將追究法律責任。

相關文章