Echart動態載入資料

2021-07-16 07:37:12 字數 507 閱讀 8431

注意:1、用ajax請求獲取後台資料 2、echarts只能處理json資料

後台controller:根據業務需求不同而返回不同資料,我前台要迴圈遍歷echarts的series進行資料新增,所以後台返了個二維陣列過去。

前端jsp頁面:為echarts準備乙個具有高寬的dom容器

前端js:初始化時即載入echarts,將不需要進行載入的配置項(例如title、tooltip等)不作改動,將需要動態載入資料的配置放入ajax的success:function(){}中進行處理。

定義乙個為series這個即將動態加入資料的配置項準備的名為item的陣列容器,

接著對後台返回過來的資料(childkind)進行遍歷,將遍歷出的資料賦給容器中的相應屬性(例:tp.name=childkind[i])。由於series裡面的data屬性(接收的是陣列資料)也需要進行資料動態載入,接著再定義乙個list陣列,迴圈寫入資料到list中,再將list陣列返給tp.data。

最後再設定echarst相關配置項。

Ajax動態滾動載入資料

核心 更新 window scroll function 首先,準備乙個分頁的儲存過程 create procedure proctest pagesize int,pagenumber int as select from select row number over order by useri...

使用echarts動態載入資料

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

Ajax動態滾動載入資料

更新核心滾動 window scroll function 首先,準備乙個分頁的儲存過程 create procedure proctest pagesize int,pagenumber intas select from select row number over order by useri...