如图: 后端返回格式
let obj = {
'1:2': [{ random: '11', age: '1' }, { random: '11', age: '1' }, { random: '11', age: '1' }],
'1:3': [{ random: '12', age: '2' }],
'1:4': [{ random: '12', age: '2' }, { random: '12', age: '2' }],
'2:1': [{ random: '13', age: '3' }],
'2:3': [{ random: '14', age: '4' }],
'3:1': [{ random: '15', age: '5' }],
'3:2': [{ random: '16', age: '6' }],
}
需求:
不难看出, 需要根据 “1:2”, “1:3”,“1:4”---------“2:1”,“2:3”--------------“3:1”,“3:2”
根据 : 前面的 数字为 组
画出 三幅图,
那每幅图有几条线 就是 根据 有几个1开头 几个2 几个3 开头的去判断
这里数据 就可以画出来:
三幅图, 线数分别为 3 2 2
理解了需求:
就要看 什么样的数据格式 能画出来呢?
我的理想格式为:
var result = [
[{
name: '1', value:
[{
name: '1:2', value: [
{ random: '10', age: '1' },
{ random: '10', age: '1' },
{ random: '10', age: '1' }
]
},
{
name: '1:3', value: [{ random: '11', age: '2' }]
},
{
name: '1:4', value: [
{ random: '11', age: '2' },
{ random: '11', age: '2' }
]
},
]
}],
[{
name: '2', value:
[{
name: '2:1', value: [{ random: '10', age: '1' }]
},
{
name: '2:3', value: [{ random: '11', age: '2' }]
},
]
}],
[{
name: '3', value:
[{
name: '3:1', value: [{ random: '10', age: '1' }]
},
{
name: '3:2', value: [{ random: '11', age: '2' }]
},
]
}]
]
思路:
首选要截取 冒号前面的 数字 进行分组,分为三个数组,代表三张图.
之后要把 冒号前面一样的数据 塞到 它下的数组
废话不多说:看代码
let dataParams = {};
const getGroup = key => {
let group = key.split(':')[0];
return Object.keys(dataParams).includes(group)
};
Object.keys(obj).forEach((item, index) => {
let group = item.split(':')[0];
if (getGroup(item)) {
dataParams[group][0].value.push({ name: item, value: obj[item] })
} else {
console.error(item, 'itemitemitemitem')
dataParams[group] = [
{ name: group, value: [{ name: item, value: obj[item] }] }
];
}
})
var result= []
for (let key in dataParams) {
result.push(dataParams[key])
}
console.error(JSON.stringify(result))
console.error(result.length)
数据格式是转好了,能不能画出来 我还没写到那,我也不知道(估计差不多,画出来了 我再更新文章)
就算画不出来 也就当 练习 逻辑了