文档首页/ 数据可视化 DLV/ 用户指南（阿布扎比区域）/ 管理组件/ 使用数据转换器
更新时间：2023-12-20 GMT+08:00
查看PDF
分享

使用数据转换器

当组件请求数据返回的结果不符合展示需求或需要经过二次加工转换时，可以通过数据转换器编辑代码对组件返回的数据进行处理。

使用数据转换器

  1. 创建一个大屏，进入大屏编辑页面。
  2. 在页面顶部单击“数据转换器”，页面底部显示数据转换器编辑区。

    图1 数据转换器

  3. 在数据转换器编辑区单击“新建数据转换器”，并输入数据转换器名称。数据转换器创建成功后可通过鼠标悬浮在转换器行，单击名称右侧的重命名转换器，单击删除转换器，若“已关联组件”个数不为“0”，请先取消组件关联再删除。

    数据转换器名称只能包含字母、数字、下划线、中划线、中文字符，且长度不超过32个字符。

  4. 单击转换器名称可以展开转换器代码区，进行代码编辑与运行。

    1. 在区域“1”的代码编辑区中编写js代码。
    2. 在区域“2”的原始数据区输入需要处理的数据。系统会将原始数据传入代码编辑器的“data”中进行编译。
    3. 单击代码编辑区的图标运行代码。会在区域“3”的转换数据区显示转换后的结果数据。
    4. 单击代码编辑区的图标将代码保存在转换器中。
    图2 数据转换器编辑

  5. 将数据转换器与组件进行关联。

    1. 选择待关联数据转换器的组件，并切换到“数据”面板。
    2. 在“数据转换器”中选择已创建的转换器进行应用。
      图3 选择数据转换器
    3. 若需要修改转换器代码，可单击“数据转换器”右侧的图标，打开底部转换器编辑浮层，可进行代码修改、运行、保存。其中原始数据区展示当前组件的请求响应数据或静态数据。

代码示例

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"
  }
]
父主题： 管理组件