前端圖表插件ECharts入門教程

在前端項(xiàng)目開發(fā)中，有很多地方會(huì)遇到繪制圖表的需求，一般的圖表可以通過(guò)canvas來(lái)繪制，但是遇到復(fù)雜一點(diǎn)的圖表怎么辦呢?不要慌，在下今天就給大家推薦一個(gè)前端大佬們用的非?；鸬膱D表插件——ECharts。

ECharts特性簡(jiǎn)介

ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù) ，啥叫開源呢，通俗點(diǎn)說(shuō)，就是免費(fèi)!不要錢!小伙伴們可以大膽放心的使用，可視化工具呢，就是將一系列的數(shù)據(jù)，轉(zhuǎn)化成非常直觀的圖表，來(lái)供大家查看，ECharts可謂是制作圖表的良心之選，并且可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等)，所以，基本完全不用擔(dān)心兼容性的問(wèn)題，底層依賴輕量級(jí)的矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。 。

ECharts 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

具體的還有的優(yōu)點(diǎn)，我就不一一介紹了，需要用到更多功能的小伙伴呢，可以去ECharts官網(wǎng)查找更多的特性(https://ECharts.baidu.com/feature.html)。

ECharts的下載

在使用ECharts之前呢，我們需要先去官網(wǎng)下載最新版本的ECharts的依賴包(https://ECharts.baidu.com/download.html),在這呢,我推薦大家下載源代碼,因?yàn)槟阍创a里面包含了所有圖表組件以及常見(jiàn)的警告和錯(cuò)誤.如果你覺(jué)得源代碼文件太大,而且項(xiàng)目中用到的圖表功能很簡(jiǎn)單的話呢,那就使用精簡(jiǎn)版的好啦。

ECharts在普通項(xiàng)目中的使用

下面呢,重點(diǎn)來(lái)啦,大家準(zhǔn)備好編譯器哈,準(zhǔn)備和小編一起完成圖表代碼的實(shí)現(xiàn)啊.

首先呢,給大家講一下ECharts圖表在普通項(xiàng)目中的使用,后面還會(huì)講到如何在vue項(xiàng)目里面使用,其他的開源框架里面如何使用我就不一一講解了哈。

第一步

老規(guī)矩,首先將下載好的ECharts.js放在項(xiàng)目的js文件夾下面,之后呢,在需要用到的頁(yè)面,引入,然后就可以開始寫代碼啦。

第二步

準(zhǔn)備好一個(gè)dom元素,當(dāng)然啦,需要給該dom元素一個(gè)id,方便我們?nèi)フ业剿?而且,還要給這個(gè)元素一個(gè)寬高,作為表格的視口,至于寬高給多少呢,各位大佬們高興就好。

第三步

開始寫js代碼啦,js代碼有三個(gè)步驟：

FIRST

初始化ECharts實(shí)例:

SECOND

指定圖表的配置項(xiàng)和數(shù)據(jù):

THIRD

使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表:

這樣子就OK啦,在瀏覽器打開你的代碼吧，我們就得到了一個(gè)帶動(dòng)畫效果的柱狀圖哦。

當(dāng)然,不只是只有柱狀圖,還有各種其他的圖表,怎么使用呢，首先點(diǎn)擊實(shí)例,我們就來(lái)到了這個(gè)頁(yè)面。

看上哪個(gè)圖表了嗎?不要猶豫啦,點(diǎn)擊進(jìn)去，我們就來(lái)到了如下頁(yè)面

然后復(fù)制左邊的option代碼,替換掉之前的第二步里面的option就可以啊,第一步和第三步是通用的,不需要修改;

圖表里面的數(shù)據(jù)也是可以自定義的,比如想渲染通過(guò)ajax請(qǐng)求過(guò)來(lái)的數(shù)據(jù)的話,直接在ajax的回調(diào)函數(shù)里面直接給option賦值或者修改就可以啦; 那么,關(guān)于ECharts圖表在普通項(xiàng)目中的使用就講到這里啦,下面就給大家演示一下,如何在vue-cli 3.0里面的應(yīng)用;

ECharts在vue-cli 3.3.0中的使用

ECharts不止是在vue-cli 3.3.0項(xiàng)目中可以使用,在其他版本的vue里面同樣可以使用,因?yàn)関ue-cli已經(jīng)更新到了3.3.0,所以我們今天用這個(gè)版本作為例子來(lái)給大家演示.

第一步

第一步呢,肯定是要先搭建vue-cli的項(xiàng)目啦,首先呢你需要有node的運(yùn)行環(huán)境,這里我就默認(rèn)大家都有啦,首先呢安裝vue-cli的全局環(huán)境npm install -g @vue/cli,裝好之后呢,嘗輸入命令vue --version,如果出現(xiàn)了3.3.0字樣,就說(shuō)明安裝成功啦,如果報(bào)錯(cuò)vue不是內(nèi)部命令的話呢,就是安裝失敗了,那就有可能是你沒(méi)有裝node環(huán)境,或者node版本過(guò)低哦,vue-cli需要 node 8.9 或更高版本 (推薦 8.11.0+),這時(shí)候你就需要裝一個(gè)更高版本的node啦;vue-cli環(huán)境搭建好之后呢,就開始創(chuàng)建vue的項(xiàng)目啦,也很簡(jiǎn)單,新建一個(gè)文件夾,然后輸入指令vue create hello-world,就可以創(chuàng)建好一個(gè)vue的初始化項(xiàng)目啦.項(xiàng)目初始化之后呢,安裝ECharts依賴包npm install ECharts -S,就可以開始寫代碼啦

第二步

在main.js里面導(dǎo)入ECharts依賴包,再將ECharts實(shí)例化函數(shù)設(shè)為vue的原型函數(shù),便于全局訪問(wèn),代碼如下圖:

第三步

然后在HelloWorld.vue的template里面添加標(biāo)簽;

script里面代碼如下:

當(dāng)然也有別的不同的寫法,但是我覺(jué)得,這是我研究了很久出來(lái)的一套比較合理的寫法,數(shù)據(jù)option放在data里面,初始化圖表的drawCharts方法放在methods里面,然后呢方法為什么要在mounted生命周期函數(shù)里面調(diào)用呢?直接在methods里面調(diào)用不行嗎?是不行的,因?yàn)槲覀冊(cè)诔跏蓟臅r(shí)候操作了dom元素,而mounted聲明周期函數(shù)是在頁(yè)面中的dom元素加載完畢之后才執(zhí)行的而函數(shù),所以在mounted里面調(diào)用drawCharts方法就不會(huì)出現(xiàn)找不到dom元素的情況啦,vue里面是拒絕操作dom元素的,但是呢,這個(gè)插件沒(méi)有辦法,必須選中dom元素初始化才可以,所以這里是一點(diǎn)小瑕疵,希望ECharts團(tuán)隊(duì)可以更加的優(yōu)化一下,最后呢,大家npm run serve一哈,哈哈哈哈哈,是不是有圖表出來(lái)啦.

結(jié)語(yǔ)

這個(gè)文檔主要是針對(duì)圖表插件ECharts寫的一個(gè)解析,大部分的東西呢,在ECharts官方文檔里面都有,但是官方文檔上面有的坑它并沒(méi)有說(shuō)出來(lái),我就把我在用這個(gè)插件時(shí)遇到的坑,還有自己對(duì)這個(gè)插件的一點(diǎn)點(diǎn)理解毫無(wú)保留的獻(xiàn)給大家,希望大家在要用到ECharts這個(gè)插件的時(shí)候呢,能耐心的看看我這個(gè)文檔,也希望這個(gè)文檔對(duì)大家有所幫助,最后呢,拜個(gè)晚年,祝大家晚年幸福!


猜你喜歡：

CSS滑動(dòng)門是什么?有什么用處?

CSS3新增了哪些選擇器?如何是使用?

黑馬程序員web前端培訓(xùn)課程 

傳智播客web前端培訓(xùn)課程