本文以輪播列表柱狀圖組件,使用數(shù)據(jù)過濾器篩選出B站網(wǎng)頁內(nèi)的每日推薦數(shù)據(jù)為例,為您演示數(shù)據(jù)過濾器的詳細(xì)使用方法。

前提條件

在可視化應(yīng)用編輯器頁面,添加所需要的輪播列表柱狀圖組件,詳情請(qǐng)參見添加資產(chǎn)

操作步驟

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