Echarts 資料繫結

2021-08-16 20:26:39 字數 967 閱讀 1507

簡單的統計表已經可以生成,不過之前圖示資料都是直接寫在引數裡面的,而實際使用中,我們的資料一般都是非同步讀取的。echart.js對於資料非同步讀取這塊提供了非同步載入的方法。

很多時候需要展示的資料不單單是一組資料,很多時候會進行乙個資料對比。這個時候只需要在series中增加一組資料,legend中新增一下這個資料組的name

echart中實現非同步資料的更新非常簡單,在圖表初始化後不管任何時候只要通過 jquery 等工具非同步獲取資料後通過setoption填入資料和配置項就行。

繫結資料的方式有兩種,一種是寫寫好一些圖表引數,然後資料留空,然後在非同步讀取資料的時候,繫結資料。還有一種就是直接非同步讀取資料的時候同時設定圖表引數和資料繫結。

首先我們準備乙份需要載入的資料檔案data.json,資料內容:

第一種非同步載入的時候設定圖表引數和繫結資料

第二種先設定圖表引數,後繫結資料

因為是非同步載入,所以有時候資料載入會慢,或者延遲。在資料沒有載入前,圖表這樣的。面對這樣的圖表,肯定會覺得這是沒有資料嗎,還是圖表有問題.對於這塊echarts增加了乙個載入動畫。

開啟loading動畫

mychart.showloading();

//載入資料函式

function

binddata(),

series:})

})},2000)

}binddata();

感謝分享

echarts 動態繫結data中的資料

echarts 中 data 的資料一般為 json 陣列,所有資料格式為 json 或json 陣列的在得到後台的資料之後都可以自行拼接為呈現的資料。所以 forceoption tooltip animationdurationupdate 1500,animationeasingupdate ...

ECharts 非同步載入資料

echarts 通常資料設定在setoption中,如果我們需要非同步載入資料,可以配合jquery等工具,在非同步獲取資料後通過 setoption 填入資料和配置項就行。json 資料 var mychart echarts.init document.getelementbyid main g...

使用echarts動態載入資料

顯示形式 1 2 3 var mychart 路徑配置 require.config 使用 require echarts echarts chart line 使用柱狀圖就載入bar模組,按需載入 function ec subtext 單位 padding 10 tooltip legend x...