本文通過設定資料來源的六個實操案例介紹如何使用資料過濾器，幫您快速瞭解資料過濾器的相關配置。
前提條件
已進入畫布編輯器頁面。
案例一：資料格式轉換
在畫布編輯器頁面，添加環圖組件。
單擊右側配置面板的資料
表徵圖，進入資料設定頁簽。單擊配置資料來源，進入設定資料來源頁簽。
修改待用資料為如下代碼。
{ "服飾": 21, "食品": 29, "建材": 13, "娛樂": 33 }說明由於當前待用資料與資料格式的參數欄位不匹配，此時圖表內容會變為空白。
選中資料過濾器，在過濾器的代碼編輯框內，輸入以下代碼。
function objToArr(obj, name, value) { const result = []; // 迴圈對象資料類型 for (const key in obj) { const item = {}; item[name] = key; item[value] = obj[key]; result.push(item); } return result; } return objToArr(data, 'name', 'value');此時發現，圖表正常顯示。
說明本案例實現了將對象格式的資料轉為數組格式的資料，由於參數欄位再次匹配成功，因此圖表正常顯示。
案例二：資料篩選及排序
在畫布編輯器頁面，添加基本折線圖組件。
在右側配置面板的配置頁簽，設定座標軸 > X軸的資料類型為類目型。
單擊右側配置面板的資料
表徵圖，進入資料設定頁簽。單擊配置資料來源，進入設定資料來源頁簽。
修改待用資料為如下代碼。
[ { "x": "服飾", "y": 800 }, { "x": "食品", "y": 779 }, { "x": "建材", "y": 180 }, { "x": "娛樂", "y": 523 }, { "x": "生鮮", "y": 192 } ]選中資料過濾器，按照如下代碼修改相關的欄位。
// 篩選 const result = data.filter(item => { return item.y >= 500; }); // 排序 result.sort((a, b) => a.y - b.y); return result;查看圖表結果，過濾器將y值大於等於500的類目進行了升序排列。
說明本案例實現了對數組中對象的資料篩選及排序，通過修改篩選條件以及排序條件，實現篩選不同資料以及控制返回資料升序或者降序排序。
案例三：擷取目前時間並格式化展示
在畫布編輯器頁面，添加通用標題組件。
單擊右側配置面板的資料
表徵圖，進入資料設定頁簽。單擊配置資料來源，進入設定資料來源頁簽。
選中資料過濾器，按照如下代碼修改相關的欄位。
擷取目前時間，並格式化為YYYY-MM-DD HH:mm:ss。
擷取傳回值，例如：2023-02-17 星期二 15:30:00。
說明時間格式說明：https://momentjs.com/docs/#/displaying/format/
Date 對象說明：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
const getTimeStr = (options = {}) => { // 給字串補 0。輸入：8，輸出：08 const strComplement = (str, digit = 2) => { str = typeof str !== 'string' ? `${str}` : str; const mask = (new Array(digit + 1)).join('0'); return mask.slice(str.length) + str; } const { myDate = new Date(), separator = '-' } = options; // 擷取目前時間的年、月、日、星期、時、分、秒 const year = myDate.getFullYear(); const month = strComplement(myDate.getMonth() + 1); const date = strComplement(myDate.getDate()); const day = `星期${'日一二三四五六'.charAt(myDate.getDay())}`; const hour = strComplement(myDate.getHours()); const minute = strComplement(myDate.getMinutes()); const second = strComplement(myDate.getSeconds()); const timeStr = `${year}${separator}${month}${separator}${date} ${day} ${hour}:${minute}:${second}`; return timeStr; } // 【試一試】將 '-' 改為 '/' 看看會發生什麼效果 return [{ value: getTimeStr({separator: '-'}) }];說明本案例實現了擷取目前時間的方法，傳回值格式為：2023-02-07 星期二 17:37:55。
您可以傳分隔字元，如
getTimeStr({separator: '/'})，傳回值格式為：2023/02/07 星期二 17:37:55您可以通過修改
timeStr欄位，自訂群組合年月日時分秒的展示， 例如修改為timeStr = `${year}${separator}${month}${separator}${date}`，傳回值格式為：2023-02-07。
案例四：設定超連結跳轉
在畫布編輯器頁面，添加輪播列表組件。
單擊右側配置面板的資料
表徵圖，進入資料設定頁簽。單擊配置資料來源，進入設定資料來源頁簽。
修改待用資料為如下代碼。
[{ "area": "浙江", "attribute": "100" }, { "area": "江蘇", "attribute": "200" }]選中資料過濾器，按照如下代碼修改相關的欄位。
//擷取超連結標籤 const getLinkTag = (baseURL = '', param = {}, style = {}) => { const joint = (obj, insideSeparator = '', betweenSeperator = '') => { const result = []; for (const key in obj) { result.push(`${key}${insideSeparator}${obj[key]}`); } return result.join(betweenSeperator); } const url = `${baseURL}?${joint(param, '=', '&')}`; const styleCss = joint(style, ':', ';'); return [ `<a href="${url}" target="_blank" style="${styleCss}" >`, '</a>' ] } return data.map(item => { // 【試一試】把 https://www.aliyun.com 改成 https://datav.aliyun.com 看看效果 const baseURL = 'https://www.aliyun.com'; // 【試一試】把 area: item.area 改成 id: item.area 看看效果 const param = { area: item.area, }; // 【試一試】把 color: 'blue' 改成 color: 'red' 看看效果 const style = { color: 'blue', background: 'yellow' } // 設定超連結 return { ...item, attribute: getLinkTag(baseURL, param, style).join(item.attribute), } });說明本案例實現了擷取超連結標籤的方法，
baseURL參數為需要跳轉的地址，param為拼接在超連結上的參數，style參數為超連結標籤的樣式屬性。
案例五：四捨五入，保留n位小數
在畫布編輯器頁面，添加輪播列表組件。
單擊右側配置面板的資料
表徵圖，進入資料設定頁簽。單擊配置資料來源，進入設定資料來源頁簽。
修改待用資料為如下代碼。
[{ "y": 1 }, { "y": 1.2246 }, { "y": 1.2332 }]選中資料過濾器，按照如下代碼修改相關的欄位。
const toFixDecimal = (num, ...args) => { const digit = typeof args[0] === 'number' ? args[0] : 2; const options = typeof args[0] === 'object' ? args[0] : (args[1] || {}); const { keepInt = true } = options; const value = Number.parseFloat(num); if (keepInt) { const base = Math.pow(10, digit); return Math.round(value * base) / base; } else { return value.toFixed(digit); } } // 迴圈列表資料類型 const result = data.map((item) => { // 【試一試】將以下注釋分別開啟看看效果 const newValue = toFixDecimal(item.y); // [ { y: 1 }, { y: 1.22 }, { y: 1.23 } ] // const newValue = toFixDecimal(item.y, 1); // [ { y: 1 }, { y: 1.2 }, { y: 1.2 } ] // const newValue = toFixDecimal(item.y, {keepInt: false}); // [ { y: '1.00' }, { y: '1.22' }, { y: '1.23' } ] // const newValue = toFixDecimal(item.y, 1, {keepInt: false}); // [ { y: '1.0' }, { y: '1.2' }, { y: '1.2' } ] return { ...item, y: newValue } }); return result;說明本案例實現了保留指定小數位元的方法，第一個參數為需要進行保留小數處理的資料欄位，預設保留2位小數，但您可以指定小數位元，比如保留3位小數
newValue = toFixDecimal(item.y,3)，樣本資料將返回：[{ y: 1 }, { y: 1.225 }, { y: 1.233 }]。如果您要展示的資料格式為：'1.00'，需要指定
{keepInt: false}；如果您指定newValue = toFixDecimal(item.y, 3, {keepInt: false})，則樣本資料返回字串格式的資料為[{ y: '1.000' }, { y: '1.225' }, { y: '1.233' }]。
案例六：複雜數組去重
在畫布編輯器頁面，添加輪播列表組件。
單擊右側配置面板的資料
表徵圖，進入資料設定頁簽。單擊配置資料來源，進入設定資料來源頁簽。
修改待用資料為如下代碼。
[ { "x": "服飾", "y": 800 }, { "x": "食品", "y": 779 }, { "x": "建材", "y": 180 }, { "x": "食品", "y": 779 }, { "x": "服飾", "y": 192 } ]選中資料過濾器，按照如下代碼修改相關的欄位。
function uniq(arr, keyList) { const valueSet = {}; return arr.reduce((result, item) => { const key = keyList.map((k) => item[k]).join('#@#'); if (!valueSet[key]) { result.push(item); valueSet[key] = true; } return result; }, []); } //【試一試】將以下注釋依次開啟看看效果。x、y 為對象 key return uniq(data, ['y']); // return uniq(data, ['x']); // return uniq(data, ['x', 'y']);說明本案例實現的是數組去重，您可以通過傳指定欄位返回去重資料，如樣本資料根據
y欄位去重，uniq(data, ['y'])，返回資料為[{ "x": "服飾", "y": 800 }, { "x": "食品", "y": 779 }, { "x": "建材", "y": 180 }，{ "x": "服飾", "y": 192 }]，y欄位值相同的資料只會按順序保留第一個；若根據x和y欄位去重，uniq(data, ['x', 'y'])，那麼x和y欄位值相同的資料會按順序保留第一個。
視頻連結
DataV小課堂直播視頻：資料來源管理-資料過濾器介紹。