前端圖表外掛ECharts入門教程
在前端專案開發中,有很多地方會遇到繪製圖表的需求,一般的圖表可以透過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資料夾下面,之後呢,在需要用到的頁面,引入,然後就可以開始寫程式碼啦。
第二步
準備好一個dom元素,當然啦,需要給該dom元素一個id,方便我們去找到它,而且,還要給這個元素一個寬高,作為表格的視口,至於寬高給多少呢,各位大佬們高興就好。
第三步
開始寫js程式碼啦,js程式碼有三個步驟:
FIRST
初始化ECharts例項:
SECOND
指定圖表的配置項和資料:
THIRD
使用剛指定的配置項和資料顯示圖表:
這樣子就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一哈,哈哈哈哈哈,是不是有圖表出來啦.
結語
這個文件主要是針對圖表外掛ECharts寫的一個解析,大部分的東西呢,在ECharts官方文件裡面都有,但是官方文件上面有的坑它並沒有說出來,我就把我在用這個外掛時遇到的坑,還有自己對這個外掛的一點點理解毫無保留的獻給大家,希望大家在要用到ECharts這個外掛的時候呢,能耐心的看看我這個文件,也希望這個文件對大家有所幫助。也許搜尋我的ID就有你想要的;
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69915785/viewspace-2740788/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- gitbook 入門教程之實用外掛(新增3個外掛)Git
- gitbook 入門教程之主題外掛(初稿)Git
- Chrome外掛入門Chrome
- 入門級前端教程前端
- Chrome外掛開發入門Chrome
- Babel 外掛開發入門指南Babel
- Babel外掛開發入門指南Babel
- ECharts 餅圖繪製教程Echarts
- webpack-bundle-analyzer外掛快速入門Web
- webpack4入門筆記——外掛Web筆記
- Gradle外掛從入門到進階Gradle
- web前端入門到實戰:好用的Js圖表庫Web前端JS
- Echarts 圖表位置調整Echarts
- fastadmin的【外掛管理】外掛使用教程AST
- Python-matplotlib-入門教程(一)-基礎圖表繪製Python
- 帶你ECharts入個門Echarts
- IntelliJ IDEA-Diagrams(圖表)外掛的使用IntelliJIdea
- gitbook 入門教程之外掛介紹Git
- mini-css-extract-plugin外掛快速入門CSSPlugin
- babel外掛入門-AST(抽象語法樹)BabelAST抽象語法樹
- Vue 前端圖形數字驗證碼外掛Vue前端
- Headshot外掛如何使用?Headshot外掛使用教程
- Django新手圖文入門教程Django
- echarts圖表樣式轉換Echarts
- 繪製圖表 go-echartsGoEcharts
- layui 中echarts實現圖表UIEcharts
- ECharts圖表——封裝通用配置Echarts封裝
- AU如何安裝vst外掛?Audition話放外掛vst的安裝圖文教程
- 詳解前端HTTP協議入門教程前端HTTP協議
- 入門看看?Chrome外掛初窺與實踐Chrome
- 開發chrome外掛入門-天氣預報Chrome
- [外掛擴充套件]焦點圖外掛套件
- 前端Vscode常用外掛概述前端VSCode
- [外掛擴充套件]qq登入外掛套件
- Vue圖片懶載入之lazyload外掛使用Vue
- Android外掛化快速入門與例項解析(VirtualApk)AndroidAPK
- WebRTC Gateway Janus入門:從配置到編寫外掛WebGateway
- Flutter入門進階之旅(二十)Flutter外掛開發Flutter