什么是ECharts？前端圖表框架echarts詳解

在web開發(fā)項(xiàng)目過程中，經(jīng)常會有需要繪制圖標(biāo)的情況，簡單的圖表可以用canvas來繪制，但是遇到復(fù)雜的圖標(biāo)canvas無法滿足其功能，遇到這種情況怎么辦呢？別著急，今天創(chuàng)新互聯(lián)建站為大家推薦一款前端大佬都備受青睞的圖標(biāo)插件-前端圖表框架echarts。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、涿州ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的涿州網(wǎng)站制作公司

1.ECharts特性簡介

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

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

2.ECharts的下載

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

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

下面重點(diǎn)來啦，準(zhǔn)備和小編一起完成圖表代碼的實(shí)現(xiàn)啊。

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

第一步

老規(guī)矩，首先將下載好的ECharts.js放在項(xiàng)目的js文件夾下面，之后呢，在需要用到的頁面，引入<script src="ECharts.js"></script>，然后就可以開始寫代碼了。

第二步

準(zhǔn)備好一個(gè)dom元素，當(dāng)然啦，需要給該dom元素一個(gè)id，方便我們?nèi)フ业剿?，而且，還要給這個(gè)元素一個(gè)寬高，作為表格的視口，至于寬高給多少呢，大家自行設(shè)置。<div id="main" style="width: 600px;height:400px;"></div>

第三步

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

FIRST

初始化ECharts實(shí)例：

SECOND

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

THIRD

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

在瀏覽器打開代碼，得到了一個(gè)帶動畫效果的柱狀圖。

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

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

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

圖表里面的數(shù)據(jù)也是可以自定義的，比如想渲染通過ajax請求過來的數(shù)據(jù)的話，直接在ajax的回調(diào)函數(shù)里面直接給option賦值或者修改就可以啦；

那么，關(guān)于ECharts圖表在普通項(xiàng)目中的使用就講到這里啦，下面就給大家演示一下如何在vue-cli 3.0里面的應(yīng)用。

4.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è)版本作為例子來給大家演示。

第一步

第一步呢，肯定是要先搭建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字樣，就說明安裝成功啦，如果報(bào)錯vue不是內(nèi)部命令的話呢，就是安裝失敗了，那就有可能是你沒有裝node環(huán)境，或者node版本過低哦，vue-cli需要 node 8.9 或更高版本 (推薦 8.11.0+)，這時(shí)候你就需要裝一個(gè)更高版本的node啦，vue-cli環(huán)境搭建好之后呢，就開始創(chuàng)建vue的項(xiàng)目啦。也很簡單，新建一個(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ù)，便于全局訪問，代碼如下圖：

第三步

然后在HelloWorld.vue的template里面添加標(biāo)簽<div id="main" style="width: 600px;height:400px;"></div>;

script里面代碼如下：

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

以上內(nèi)容是針對前端圖表框架echarts的詳解，上文對使用該插件的操作步驟、注意事項(xiàng)進(jìn)行了詳細(xì)介紹，希望對大家有所幫助。

本文題目：什么是ECharts？前端圖表框架echarts詳解
轉(zhuǎn)載來源：http://muchs.cn/article5/dghdpii.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、小程序開發(fā)、營銷型網(wǎng)站建設(shè)、Google、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)