echarts旭日图数据重构处理

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

网上对于旭日图的数据结构处理资料很少，所以自己记录一下。
首先看旭日图需要的数据结构：

// 旭日图
  { 
   
    name: '淘宝',
    children: [
      { 
   
        name: '女装',
        children:[
        { 
   
          name:'上衣',
          value:22
        },
        { 
   
          name:'裙子',
          value:12
        },
        { 
   
          name:'裤子',
          value:18
        }]
      },{ 
   
        name:'男装',
        children:[],
      }
    ]
  }

其实就是树状结构数据。
待处理数据：

表格中数据：

var data = [
      ["名称","分类","装扮","总销量"],
      ["淘宝", "女装","上衣","220"],
      ["", "","裙子","120"],
      ["", "","裤子","180"],
      ["", "男装","上衣","230"],
      ["", "","裤子","240"],
      ["京东", "男装","裤子","152"],
      ["", "童装","童装","180"],
      ["", "女装","上衣","240"],
      ["", "","裤子","145"],
      ["拼多多", "男装","上衣","160"],
      ["", "","裤子","240"],
      ["", "","内衣","190"],
      ["", "","运动装","210"],
      ["", "童装","童装","170"],
    ]

这段数据要处理成旭日图能用的数据：

xuritu: (data) => { 
   
    var deal_data = data;   //第一次处理 将第一级分类分出来
    // var r_length = data[0].filter(str => !!str).length; //第一项总长度
    // deal_data.shift();
    var sortArr = [];
    for (var i = 1; i < deal_data.length; i++) { 
   
      if (i != 0 && i != deal_data.length && data[i][0] != '' && data[i][0] != data[i - 1][0]) { 
   
        if (i) { 
   
          var feileiArr = [];
          var l = 0;
          for (var z = 0; z < sortArr.length; z++) { 
   
            l = l + sortArr[z].length;
          }
          for (var j = l; j < i; j++) { 
   
            feileiArr.push(deal_data[j])
          }
          sortArr.push(feileiArr);
        }
      }
    }
    //第二次处理，将每一个数据加上id和父级id，用id进行关联
    var _sortArr = sortArr;
    console.log(_sortArr)
    var result_data = [];
    for(var y=0;y<_sortArr.length;y++){ 
   
      var first_res_data = { 
   
        name:_sortArr[y][0][0],
        children:[]
      }
      first_res_data.children = setTreeData(secondDeal(_sortArr[y]));
      result_data.push(first_res_data);
    }
    //这个方法用于加上id
    function secondDeal(sortArr) { 
   
      var second_d_data = []
      for (var i = 0; i < sortArr.length; i++) { 
   
        for (var j = 1; j < sortArr[i].length - 1; j++) { 
   
          var _parentId;
          if (i == 0) { 
   
            _parentId = i + "-" + (j - 1)
          } else { 
   

            for (var z = 0; z < 20; z++) { 
   
              if ((((i - z) > 0) || ((i - z) == 0)) && sortArr[i - z][j - 1]) { 
   
                _parentId = (i - z) + "-" + (j - 1)
                break;
              }
            }
          }
          if (!Number(sortArr[i][j]) && sortArr[i][j]) { 
     //去除最后一项，等同于合并最后一项与倒数第二项
            var d;
            if (Number(sortArr[i][j + 1])) { 
   
              d = { 
   
                id: i + "-" + j,
                name: sortArr[i][j],
                value: parseInt(sortArr[i][j + 1]),
                parentId: _parentId
              }
            } else { 
   
              d = { 
   
                id: i + "-" + j,
                name: sortArr[i][j],
                parentId: _parentId
              }
            }
            second_d_data.push(d);
          }

        }
      }
      return second_d_data;
    }
    //处理成树状结构
    function setTreeData(arr) { 
   
      // 删除所有的children,以防止多次调用
      arr.forEach(function (item) { 
   
        delete item.children;
      });
      let map = { 
   }; //构建map
      arr.forEach(i => { 
   
        map[i.id] = i; //构建以id为键 当前数据为值
      });
      let treeData = [];
      arr.forEach(child => { 
   
        const mapItem = map[child.parentId]; //判断当前数据的parentId是否存在map中
        if (mapItem) { 
   
          //存在则表示当前数据不是最顶层的数据
          //注意： 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点
          (mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child
        } else { 
   
          //不存在则是顶层数据
          treeData.push(child);
        }
      });
      return treeData;
    }
    result_data.shift();  //去除第一项
    return result_data;
  },

第一次处理的数据：

将三种不同类型分别分出来

第二次处理： ，并给每一项加上id和父级id

最后效果：

完工！