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

最新推荐文章于 2024-03-13 16:07:24 发布

smileNano

最新推荐文章于 2024-03-13 16:07:24 发布

阅读量1k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/smilenano/article/details/129859066

版权

后端传入数据不完整情况，例：两组时间节点，相同名称内，仅第一项时间节点有相关数据，第二项无数据，对此将数据进行整合补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;
    },