首頁 > web前端 > js教程 > 主體

echarts圖表的使用經驗總結 (避免踩坑)

yulia
發布: 2018-09-26 14:53:03
原創
3255 人瀏覽過

在工作中有時會用到echarts圖表,經常踩坑,今天就總結一下,方便自己以後查看,同時也分享給大家,避免大家出錯。在使用Echarts顯示長條圖時,首先得問題就是配置Echarts的js問題,這裡注意的是在進行配置的時候,要注意Echarts的版本問題。

Echarts使用:

使用Echarts來顯示圖表,相較於Hcharts來說,這兩者並沒有多大的區別,在原理上都是透過ajax函數回呼來解析json格式的數據,將解析出來的數據用圖表來進行顯示,而兩者的區別用一個比喻來說就像是office和wps的區別,而最大的區別主要是來自技術支持的,highcharts是基於svg技術的,而echarts基於canvas,兩者技術基礎完全不一樣,各有特色。而後者是可以在瀏覽器實現3D圖形的,這種效果highcharts是完全不可能做得到的。

使用echarts主要是包含三個部分:json資料封裝、ajax請求和回調處理和引用echarts的js。

json資料封裝:

主要是資料庫操作,這裡主要是完成對於DataSet格式的查詢出來的資料進行轉換成json格式的數據,將查詢出來的資料放到list中,最主要的是將這個list進行JavaScriptSerializer的序列化,序列化的目的就是將list物件轉化成json格式數據,這是完成echarts圖表顯示的資料格式調整和資料準備。

ajax請求和回調處理

因為這裡涉及到非同步請求,需要使用到ajax請求,在使用時主要使用的是請求回調,這裡也使用了一般處理程序,也就是建立類別來處理,

echarts圖表的使用經驗總結 (避免踩坑)

echarts圖表的使用經驗總結 (避免踩坑)

透過這個cmd可以取得到具體是執行的是哪個前端來發送請求。 dataType主要是表示的資料的類型,這裡主要是json格式資料;Success表示的是後台回傳資料後且ajax執行成功後的回呼。

echarts圖表的使用經驗總結 (避免踩坑)

注意的是,主要是echarts.js和echarts-map.js的版本問題,主要這兩者要與esl.js的版本統一,esl.js是echarts2的版本,在開始時,直接從Echarts觀望下載最新的Echarts3後,導致圖表不顯示。

測試時,總是能取得到數據,但是不能顯示圖表

當圖表不顯示時,一般是要測試數據是否是正確的,或者是測試數據是否是有的,主要測試的是ajax的使用是否是正確的,在開始時,ajax提交到一般處理程序中,能夠獲取到相應的json格式的數據,但是一直走的是error函數回調,主要的問題就是要配置一下myEcharts.js中的js引用:

echarts圖表的使用經驗總結 (避免踩坑)

這裡要準確的配置這兩個js,因為這兩個js是用來顯示圖表資訊的,直接影響到的是ajax的回呼函數ECharts.Bars()的回呼是否是成功的。

以上是echarts圖表的使用經驗總結 (避免踩坑)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板