黑馬程序員視頻庫

播妞QQ號：3077485083

傳智播客旗下互聯網資訊、學習資源免費分享平臺

在前端項目開發中，有很多地方會遇到繪制圖表的需求，一般的圖表可以通過canvas來繪制，但是遇到復雜一點的圖表怎么辦呢？

不要慌，今天就給大家推薦一個前端大佬們用的非常火的圖表插件——ECharts。

?ECharts特性簡介?

ECharts是一個使用 JavaScript 實現的開源可視化庫 ，啥叫開源呢，通俗點說，就是免費！不要錢！小伙伴們可以大膽放心的使用。可視化工具呢，就是將一系列的數據，轉化成非常直觀的圖表，來供大家查看。

ECharts可謂是制作圖表的良心之選，并且可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）。

所以，基本完全不用擔心兼容性的問題，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

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

?ECharts的下載?

在使用ECharts之前，我們需要先去官網下載最新版本的ECharts的依賴包。在這，我推薦大家下載源代碼，因為你源代碼里面包含了所有圖表組件以及常見的警告和錯誤。

如果你覺得源代碼文件太大，而且項目中用到的圖表功能很簡單的話呢，那就使用精簡版的好啦。

?ECharts在普通項目中的使用?

下面重點來啦！

大家準備好編譯器哈~

準備和小編一起完成圖表代碼的實現。

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

第一步

老規矩，首先將下載好的ECharts.js放在項目的js文件夾下面，之后，在需要用到的頁面，引入<script src="ECharts.js"></script>，然后就可以開始寫代碼啦~

第二步

準備好一個dom元素，當然，需要給該dom元素一個id，方便我們去找到它，而且，還要給這個元素一個寬高，作為表格的視口,至于寬高給多少呢。各位大佬們高興就好。<div id="main" style="width: 600px;height:400px;"></div>

第三步

開始寫js代碼啦，js代碼有三個步驟：

FIRST

初始化ECharts實例：

var myChart = ECharts.init(document.getElementById('main'));

SECOND

指定圖表的配置項和數據：

var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};

THIRD

使用剛指定的配置項和數據顯示圖表：

myChart.setOption(option);

這樣子就OK啦，在瀏覽器打開你的代碼吧，我們就得到了一個帶動畫效果的柱狀圖。

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

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

然后復制左邊的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的原型函數，便于全局訪問,代碼如下圖：

第三步

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

script里面代碼如下：

當然也有別的不同的寫法，但是我覺得,這是我研究了很久出來的一套比較合理的寫法，數據option放在data里面，初始化圖表的drawCharts方法放在methods里面。

然后，方法為什么要在mounted生命周期函數里面調用呢？直接在methods里面調用不行嗎？是不行的，因為我們在初始化的時候操作了dom元素，而mounted聲明周期函數是在頁面中的dom元素加載完畢之后才執行的而函數。所以在mounted里面調用drawCharts方法就不會出現找不到dom元素的情況。

vue里面是拒絕操作dom元素的，但是這個插件沒有辦法,必須選中dom元素初始化才可以,所以這里是一點小瑕疵，希望ECharts團隊可以更加的優化一下。最后，大家npm run serve一哈。是不是有圖表出來啦！

這篇文章主要是針對圖表插件ECharts寫的一個解析，大部分的東西，在ECharts官方文檔里面都有，但是官方文檔上面有的坑它并沒有說出來。

我把在用這個插件時遇到的坑，還有自己對這個插件的一點點理解毫無保留的獻給大家，希望大家在要用到ECharts這個插件的時候，能耐心的看完，相信一定會對大家有所幫助的！

?前沿資訊/干貨資料/免費課程?

盡在黑馬程序員視頻

更多問題掃碼咨詢

????????????

END

- 推薦閱讀 -

你的GitHub代碼已打包運往北極，傳給1000年后人類！網友：我的Bug還沒修復...

2020-07-30

200行代碼，10大知識點，3天做游戲！讓你“爽爽爽”的學習利器！

2020-07-28

扒一扒國內外最火開發語言“上位”史！升職加薪很靠譜！

2020-07-23

跳槽首選，平均薪資2w+！現在入門快人一步

2020-07-21

我就知道你“在看”

總結

以上是生活随笔為你收集整理的保姆级教程｜ECharts图表插件一文搞懂！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。