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

最后效果：

完工！