前端可視化開發工具折線圖（快速入門前端圖表插件E-chart）

2023-05-18 02:26:04 1

在前端項目開發中，有很多地方會遇到繪製圖表的需求，一般的圖表可以通過canvas來繪製，但是遇到複雜一點的圖表怎麼辦呢？而且黑馬的課程大綱已經把canvas課程刪掉了，既然canvas有用，為什麼要把他從課程大綱裡面刪掉呢？

canvas主要是用作前端小遊戲的渲染，還有圖表的製作。我們去公司做的項目，遊戲類的項目，很少。然後自己手寫canvas圖表，非常的複雜，可謂費時費力。因此，我們不建議浪費特別多的時間去學習canvas這個前端技術。當然想自學的小夥伴呢，可以去網上找教程學習。如果不會canvas，老闆又讓寫圖表，該怎麼辦呢？

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

Echarts特性簡介

ECharts是一個使用 Java 實現的開源可視化庫 ，啥叫開源呢，通俗點說，就是免費！不要錢！小夥伴們可以大膽放心的使用。

可視化工具呢，就是將一系列的數據，轉化成非常直觀的圖表，來供大家查看，Echarts可謂是製作圖表的良心之選，並且可以流暢的運行在 PC 和行動裝置上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），所以，基本完全不用擔心兼容性的問題，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

Echarts在普通項目中的使用

下面重點來啦,大家準備好編譯器哈,一起完成圖表代碼的實現！

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

第一步

老規矩,首先將下載好的echarts.js放在項目的js文件夾下面,之後呢,在需要用到的頁面,引入,然後就可以開始寫代碼啦

第二步

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

第三步

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

這樣子就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裡面添加標籤;

裡面代碼如下:

當然也有別的不同的寫法,但是我覺得,這是我研究了很久出來的一套比較合理的寫法,數據option放在data裡面,初始化圖表的drawCharts方法放在methods裡面,然後方法為什麼要在mounted生命周期函數裡面調用呢?直接在methods裡面調用不行嗎?

是不行的,因為我們在初始化的時候操作了dom元素,而mounted聲明周期函數是在頁面中的dom元素加載完畢之後才執行的而函數,所以在mounted裡面調用drawCharts方法就不會出現找不到dom元素的情況啦,vue裡面是拒絕操作dom元素的,但是呢,這個插件沒有辦法,必須選中dom元素初始化才可以,所以這裡是一點小瑕疵,希望echarts團隊可以更加的優化一下,最後呢,大家npm run serve一哈,哈哈哈哈哈,是不是有圖表出來啦！

結語

上面就是對圖表插件echarts寫的一個解析,大部分的東西在Echarts官方文檔裡面都有,但是官方文檔上面有的坑它並沒有說出來,在這裡我就把我在用這個插件時遇到的問題以及解決的方法,還有自己對這個插件的理解毫無保留的獻給大家,希望這個解析對小夥伴們有所幫助，在要用到echarts這個插件的時候都可以運用的輕鬆自如！