本文以輪播列表柱狀圖組件,使用數(shù)據(jù)過濾器篩選出B站網(wǎng)頁內(nèi)的每日推薦數(shù)據(jù)為例,為您演示數(shù)據(jù)過濾器的詳細(xì)使用方法。
前提條件
在可視化應(yīng)用編輯器頁面,添加所需要的
輪播列表柱狀圖組件,詳情請(qǐng)參見
添加資產(chǎn)。
操作步驟
- 登錄DataV控制臺(tái)。
- 在我的可視化頁面,單擊您創(chuàng)建的可視化應(yīng)用項(xiàng)目上方的編輯按鈕。
- 在畫布編輯器頁面,單擊圖層欄或畫布中的某一個(gè)資產(chǎn)。
注意 在搜索資產(chǎn)配置之前,請(qǐng)確保您的可視化應(yīng)用項(xiàng)目中已經(jīng)添加了相應(yīng)的資產(chǎn),否則需要首先添加資產(chǎn),詳情請(qǐng)參見
添加資產(chǎn)。
- 單擊編輯器右側(cè)的數(shù)據(jù)圖標(biāo)。
- 在設(shè)置數(shù)據(jù)源頁面中,在數(shù)據(jù)源類型列表中選擇API,并在數(shù)據(jù)源編輯框內(nèi)填寫本次源數(shù)據(jù)的B站URL網(wǎng)址鏈接(
https://www.bilibili.com/index/recommend.json
)。
- 選中服務(wù)器代理請(qǐng)求(本次數(shù)據(jù)請(qǐng)求是跨域模式)。
- 單擊預(yù)覽數(shù)據(jù)源返回結(jié)果,查看B站網(wǎng)址源數(shù)據(jù)的返回結(jié)果。
在預(yù)覽頁面,可以看到請(qǐng)求的返回結(jié)果是一個(gè)
JSON
對(duì)象。但是
輪播列表需要顯示的是個(gè)對(duì)象列表,每個(gè)對(duì)象內(nèi)需要包含
content和
value兩個(gè)字段,因此您需要繼續(xù)執(zhí)行以下步驟配置數(shù)據(jù)過濾器,轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)。
- 選中數(shù)據(jù)過濾器,并打開開啟過濾器調(diào)試開關(guān)。
- 單擊添加過濾器右側(cè)的圖標(biāo),添加一個(gè)過濾器。
- 編輯過濾器內(nèi)的代碼內(nèi)容,完成后,單擊測(cè)試查看數(shù)據(jù)過濾結(jié)果。
上圖中的示例觸發(fā)條件如下。
return data.list.map(item => {
return {
value: item.author,
content: item.description
};
});
過濾器內(nèi)的代碼編輯完成后,可以看到經(jīng)過轉(zhuǎn)換得到的組件所需要的數(shù)據(jù)列表,內(nèi)容顯示樣式為
value和
content兩個(gè)字段。
- 配置并測(cè)試成功后,單擊保存,并刷新數(shù)據(jù)響應(yīng)結(jié)果,查看B站每日推薦的數(shù)據(jù)。