首页 前端知识 echarts 数据不完整,对数据进行补0操作

echarts 数据不完整,对数据进行补0操作

2024-04-18 00:04:13 前端知识 前端哥 586 924 我要收藏

后端传入数据不完整情况,例:两组时间节点,相同名称内,仅第一项时间节点有相关数据,第二项无数据,对此将数据进行整合补0,达到数据统一且能正常展示图表

示例data:

data: [
  {
    pestName: '花蝴蝶',
    pestNum: 10,
    title: '2023年03月30日'
  },{
    pestName: '粉蝴蝶',
    pestNum: 15,
    title: '2023年03月31日'
  },{
    pestName: '白蝴蝶',
    pestNum: 14,
    title: '2023年03月31日'
  },{
    pestName: '粉蝴蝶',
    pestNum: 14,
    title: '2023年03月30日'
  },{
    pestName: '粉蝴蝶',
    pestNum: 15,
    title: '2023年03月31日'
  },
]
//调用方法,转换数据
const newData = this.objArrtransArrs(this.data);
const data = newData; // data 最终数据

//方法定义
// 图表参数名方法定义
    objArrtransArrs(olddata) {
      // 拿到数组的时间节点,去重
      let title = []
      olddata.forEach(item => {
        title.push(item.title)
      })
      let titleArray = title.filter((item, index, array) => {
       return array.indexOf(item) === index
     })
      var newArr = [];
      // 数组遍历
      for (var i = 0; i < olddata.length; i++) {
        // 一个时间节点,数据缺失补零,保证图表拿到数据格式统一,正常展示
        let datas = []
        titleArray.forEach((item, index) => {
          datas[index] = 0
      })
        var arrindex = newArr.findIndex((item, index, arr) => {return item.name === olddata[i].pestName}) //获取下标
        if(arrindex==-1){ //不存在盘符数据的添加盘符数据
        // 判断时间节点,获取下标,保证数据统一且正确存入标志位
        var aaa = 1
        titleArray.forEach((items, index) => {
          if(olddata[i].title === items) {
            aaa = index
          }
        })
         datas[aaa] = olddata[i].pestNum
         newArr.push({
           "name": olddata[i].pestName,
           "type": "line",
           "stack": "Total",
           "data": datas
         });
        } else { //有盘符则往盘符数据中添加
        // 判断时间节点,获取下标,保证数据统一且正确存入标志位
        var ccc = 1
        titleArray.forEach((items, index) => {
          if(olddata[i].title === items) {
            ccc = index
          }
        })
          newArr[arrindex].data[ccc]=olddata[i].pestNum
        }
      }
      return newArr;
    },

另附:参数名统一 格式

//调用方法,转换数据
const newData = this.objArrtransArr(this.data, "pestNum", "pestName");
const data = newData;

// 方法定义
objArrtransArr(olddata, oldval, oldname) {
      const newArr = [];
      olddata.forEach(item => {
      // 定义数组内部对象形式
        let obj = {};
        obj.value = item[oldval];
        obj.name = item[oldname];
        // 将对象数据推到数组中
        newArr.push(obj);
      });
      return newArr;
    },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5145.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!