echarts圖表的使用經驗總結 （避免踩坑）

在工作中有時會用到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中文網其他相關文章！