天天看點

echarts通過ajax動态擷取資料的方法

echarts表格的資料一般都需要動态擷取,是以總結了一下通過ajax動态擷取資料的操作;

插入的方法應該不止一種,我也是接觸不久,是以剛學會了一種插入方法;

靈感和經驗來自:https://www.cnblogs.com/zhaoyingjie/p/5963056.html;

前提需了解echarts的基本文法和布局,在這裡隻記錄擷取資料部分:

首先,資料的插入主要由xAxis,series中的data[]内插入,動态擷取的時候為空,寫法即為:data[],

然後,在script标簽中寫入$.ajax請求方式,然後擷取資料,保證資料已擷取出來;

再者,可以通過for循環周遊所有資料并插入到建立的空數組中;(如果擷取的資料即為數組這步應該可以省略,直接插入到data中;或者隻需要插入擷取資料的部分,可以執行此操作)

最後,将空數組引入到所要插入資料的圖表option的data[]中,完成!

精簡代碼如下:

(1)xAxis:{ data:[] },series: { data:[] } ;

(2)$.ajax( for(var i = 0;i<arr.length;i++){     xAxisName.push(arr[i]); return xAxisName;   } );//arr為擷取出來的資料集合;長度也可自定,用于擷取部分資料;

(3)然後再将該數組插入到data中:mycharts.setOption({  xAxis:{  data:xAxisName   }    });//此代碼是寫在ajax的for循環之外的,$.ajax内部的;和外面的mycharts.setOption(option);不一樣;

基本就是這些。