js 改变数据结构 去画echarts 图(解决)

3 篇文章 0 订阅

在这里插入图片描述

如图: 后端返回格式

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)

数据格式是转好了,能不能画出来 我还没写到那,我也不知道(估计差不多,画出来了 我再更新文章)

就算画不出来 也就当 练习 逻辑了

出图了! 可以实现 !!!

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值