在前端項目開發中，有很多地方會遇到繪制圖表的需求，一般的圖表可以通過canvas來繪制，但是遇到復雜一點的圖表怎么辦呢?不要慌，在下今天就給大家推薦一個前端大佬們用的非常火的圖表插件——ECharts。
ECharts特性簡介
ECharts是一個使用 JavaScript 實現的開源可視化庫 ，啥叫開源呢，通俗點說，就是免費!不要錢!小伙伴們可以大膽放心的使用，可視化工具呢，就是將一系列的數據，轉化成非常直觀的圖表，來供大家查看，ECharts可謂是制作圖表的良心之選，並且可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器(IE8/9/10/11，Chrome，Firefox，Safari等)，所以，基本完全不用擔心兼容性的問題，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。 。
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。
具體的還有的優點，我就不一一介紹了，需要用到更多功能的小伙伴呢，可以去ECharts官網查找更多的特性(https://ECharts.baidu.com/feature.html)。
ECharts的下載
在使用ECharts之前呢，我們需要先去官網下載最新版本的ECharts的依賴包(https://ECharts.baidu.com/download.html),在這呢,我推薦大家下載源代碼,因為你源代碼里面包含了所有圖表組件以及常見的警告和錯誤.如果你覺得源代碼文件太大,而且項目中用到的圖表功能很簡單的話呢,那就使用精簡版的好啦。
ECharts在普通項目中的使用
下面呢,重點來啦,大家准備好編譯器哈,准備和小編一起完成圖表代碼的實現啊.
首先呢,給大家講一下ECharts圖表在普通項目中的使用,后面還會講到如何在vue項目里面使用,其他的開源框架里面如何使用我就不一一講解了哈。
第一步
老規矩,首先將下載好的ECharts.js放在項目的js文件夾下面,之后呢,在需要用到的頁面,引入,然后就可以開始寫代碼啦。
第二步
准備好一個dom元素,當然啦,需要給該dom元素一個id,方便我們去找到它,而且,還要給這個元素一個寬高,作為表格的視口,至於寬高給多少呢,各位大佬們高興就好。
第三步
開始寫js代碼啦,js代碼有三個步驟：
FIRST
初始化ECharts實例:
var myChart = ECharts.init(document.getElementById('main'));
SECOND
指定圖表的配置項和數據:
var option = {
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里面添加標簽;
script里面代碼如下:
當然也有別的不同的寫法,但是我覺得,這是我研究了很久出來的一套比較合理的寫法,數據option放在data里面,初始化圖表的drawCharts方法放在methods里面,然后呢方法為什么要在mounted生命周期函數里面調用呢?直接在methods里面調用不行嗎?是不行的,因為我們在初始化的時候操作了dom元素,而mounted聲明周期函數是在頁面中的dom元素加載完畢之后才執行的而函數,所以在mounted里面調用drawCharts方法就不會出現找不到dom元素的情況啦,vue里面是拒絕操作dom元素的,但是呢,這個插件沒有辦法,必須選中dom元素初始化才可以,所以這里是一點小瑕疵,希望ECharts團隊可以更加的優化一下,最后呢,大家npm run serve一哈,哈哈哈哈哈,是不是有圖表出來啦.