在工作中有時會用到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
ajax請求和回調處理
因為這裡涉及到非同步請求,需要使用到ajax請求,在使用時主要使用的是請求回調,這裡也使用了一般處理程序,也就是建立類別來處理,
透過這個cmd可以取得到具體是執行的是哪個前端來發送請求。 dataType主要是表示的資料的類型,這裡主要是json格式資料;Success表示的是後台回傳資料後且ajax執行成功後的回呼。
注意的是,主要是echarts.js和echarts-map.js的版本問題,主要這兩者要與esl.js的版本統一,esl.js是echarts2的版本,在開始時,直接從Echarts觀望下載最新的Echarts3後,導致圖表不顯示。
測試時,總是能取得到數據,但是不能顯示圖表
當圖表不顯示時,一般是要測試數據是否是正確的,或者是測試數據是否是有的,主要測試的是ajax的使用是否是正確的,在開始時,ajax提交到一般處理程序中,能夠獲取到相應的json格式的數據,但是一直走的是error函數回調,主要的問題就是要配置一下myEcharts.js中的js引用:
這裡要準確的配置這兩個js,因為這兩個js是用來顯示圖表資訊的,直接影響到的是ajax的回呼函數ECharts.Bars()的回呼是否是成功的。
以上是echarts圖表的使用經驗總結 (避免踩坑)的詳細內容。更多資訊請關注PHP中文網其他相關文章!