使用数据转换器 | 您所在的位置:网站首页 › 华为转换器怎么使用 › 使用数据转换器 |
当组件请求数据返回的结果不符合展示需求或需要经过二次加工转换时,可以通过数据转换器编辑代码对组件返回的数据进行处理。 使用数据转换器 创建一个大屏,进入大屏编辑页面。 在页面顶部单击“数据转换器”,页面底部显示数据转换器编辑区。 图1 数据转换器![]() ![]() ![]() 数据转换器名称只能包含字母、数字、下划线、中划线、中文字符,且长度不超过32个字符。 单击转换器名称可以展开转换器代码区,进行代码编辑与运行。 在区域“1”的代码编辑区中编写js代码。 在区域“2”的原始数据区输入需要处理的数据。系统会将原始数据传入代码编辑器的“data”中进行编译。 单击代码编辑区的图标![]() ![]() ![]() ![]() ![]() js语法请参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript。 数据转换示例1(当返回的天气数据中数据结构嵌套复杂,指标数据分散时,转换为更简单的格式显示) 代码return data.results[0].weather_data.map(it => { return { date: it.date, weather: `${it.weather} ${it.wind} ${it.temperature}` }; }); 原始数据{ "error": 0, "status": "success", "date": "2020-11-27", "results": [{ "currentCity": "city A", "pm25": "119", "index": [], "weather_data": [{ "date": "周三 09月16日 (实时:28°C)", "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/3.png", "nightPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/3.png", "weather": "阴转多云", "wind": "东风3-4级", "temperature": "25 ~ 15°C" }, { "date": "周四", "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/5.png", "nightPictureUrl": "", "weather": "多云转晴", "wind": "西北风微风", "temperature": "26 ~ 12°C" }, { "date": "周五", "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/1.png", "nightPictureUrl": "", "weather": "晴", "wind": "东风微风", "temperature": "30 ~ 16°C" }, { "date": "周六", "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/5.png", "nightPictureUrl": "", "weather": "多云转阴", "wind": "东南风3-4级", "temperature": "30 ~ 18°C" }] }] } 转换结果[ { "date": "周三 09月16日 (实时:28°C)", "weather": "阴转多云 东风3-4级 25 ~ 15°C" }, { "date": "周四", "weather": "多云转晴 西北风微风 26 ~ 12°C" }, { "date": "周五", "weather": "晴 东风微风 30 ~ 16°C" }, { "date": "周六", "weather": "多云转阴 东南风3-4级 30 ~ 18°C" } ] 数据转换示例2(当返回多系列(series )数据时,转换为仅显示series为‘搜索’的所有数据项) 代码return data.filter(it => it.series === '搜索'); 原始数据[ { "area": "city A", "series": "速速速", "num": "120", "id": "1" }, { "area": "city B", "series": "搜索", "num": "150", "id": "2" }, { "area": "city C", "series": "3", "num": "120", "id": "3" }, { "area": "aa", "series": "44", "num": "44", "id": "5" } ] 转换结果[ { "area": "city B", "series": "搜索", "num": "150", "id": "2" } ] 数据转换示例3(当数据为小数时,转换为百分数显示并保留2位小数) 代码return data.map(it => { it.y = (it.y * 100).toFixed(2); return it; }); 原始数据[ { "x": "销售", "y": 0.78, "s": 1 }, { "x": "管理", "y": 0.55, "s": 1 }, { "x": "技术", "y": 0.68, "s": 1 }, { "x": "客服", "y": 0.48, "s": 1 }, { "x": "研发", "y": 0.7, "s": 1 }, { "x": "市场", "y": 0.85, "s": 1 } ] 转换结果[ { "x": "销售", "y": "78.00", "s": 1 }, { "x": "管理", "y": "55.00", "s": 1 }, { "x": "技术", "y": "68.00", "s": 1 }, { "x": "客服", "y": "48.00", "s": 1 }, { "x": "研发", "y": "70.00", "s": 1 }, { "x": "市场", "y": "85.00", "s": 1 } ] 数据转换示例4(当返回数据为空数组【】时,转换为数据值 0显示) 代码if (Array.isArray(data) && data.length === 0) { const item = {}; item['finalName'] = '修改次数'; item['finalValue'] = 0; data.push(item) return data; } else { return data; } 原始数据[] 转换结果[ { "finalName": "修改次数", "finalValue": 0 } ] 数据转换示例5(柱状图组件仅显示下拉搜索框交互时选中的数据,代码中引用交互变量variables.cato进行过滤显示) 代码return data.filter(it => it.cato === variables.cato); 原始数据[ { "cato": "city A", "num": 678, "id": "0" }, { "cato": "city B", "num": 0, "id": "0" }, { "cato": "city C", "num": 379, "id": "0" }, { "cato": "city D", "num": 678, "id": "0" }, { "cato": "city E", "num": 6666.0024, "id": "0" }, { "cato": "city F", "num": 12345.667, "id": "0" }, { "cato": "city G", "num": 89080, "id": "0" }, { "cato": "city H", "num": 89080, "id": "0" }, { "cato": "city I", "num": 654321.3, "id": "0" } ] 转换结果[ { "cato": "city A", "num": 678, "id": "0" } ] |
CopyRight 2018-2019 实验室设备网 版权所有 |