18. 不连贯数据 [ 数据不完整 ] 如何整合数据为统一格式

79 阅读1分钟
  • 由于后端返回的统计数据是断断续续的纪录
  • 如统计月份 有的是1到12月 有的是3月到4月,如要将他们渲染成多折线图 image.png
  • 首先是要一个最长的月份
  • 其次其他对应月没数据的要填写空值
// 年度消耗趋势
    setYearTrend(data) {
      // 图例的名字,与每一项 series.name对应
      this.annualConsumpTrend.legend.data = data.map((item) => item.title);
      // 提取柱标
      let lengths = data.map((item) => item.node.length);
      let big = lengths.reduce((pre, cur) => (pre > cur ? pre : cur));
      // 已去取出最大的 length 满足之一,立即返回
      let bigList = data.find((item) => {
        console.log(item.node.length, big);
        if (item.node.length == big) {
          return item;
        }
      });
      // 判断的话一个满足条件的作参照就可以
      let xAxis = bigList.node.map((item) => item.title);
      this.annualConsumpTrend.xAxis.data = xAxis
      // 遍历每个数组给值设置默认值
      let seriesData = data.map((item,index) => {
        // 确定了有几个数组
        // 按照 xAxis 的数量填充数据
        let arr = [];
        xAxis.map((itemArr,index)=>{ arr[index] = 0 })
        xAxis.map( (target,index) => {
           item.node.map( item2 => {
            if ( item2.title == target ) {
              arr[index] = item2.numberData
            }
          })
        });
        return {
          name: item.title,
          type: "line",
          stack: "Total",
          data: arr,
        };
      });
      this.annualConsumpTrend.series = seriesData
    },
    ```