怎么整理这个数据结构,我判断了有这个类型就只加数字进data,没有就新增,但还是每一个类型都新增了一遍

数据是data这样的格式,每条数据里有类型和部门,统计的总学时、培训总数、总人次,我想整理成echart用的这种格式,数据遍历出来不对。我在echert里模拟了我的数据。

const data = [
    { departName: '部门1', trainClassHours: 1, trainCount: 2, trainSigninNumber: 3, typeName: '类型1' },
    { departName: '部门1', trainClassHours: 11, trainCount: 22, trainSigninNumber: 33, typeName: '类型2' },
    { departName: '部门2', trainClassHours: 111, trainCount: 222, trainSigninNumber: 333, typeName: '类型1' },
    { departName: '部门2', trainClassHours: 1111, trainCount: 2222, trainSigninNumber: 3333, typeName: '类型2' },
    {
        departName: '部门1',
        trainClassHours: 11111,
        trainCount: 22222,
        trainSigninNumber: 33333,
        typeName: '类型3'
    },
]
const bumenArr = [];//部门
const huodongArr = [];//类型+统计方式
const series = [];//数据

data.map(function (item, index) {
    bumenArr.push(item.departName);

    const trainClassHours = item.typeName + '-总学时';
    const trainCount = item.typeName + '-培训总数';
    const trainSigninNumber = item.typeName + '-总人次';
    huodongArr.push(trainClassHours, trainCount, trainSigninNumber);

    if (series.length > 0) {
        series.map(function (item2, index2) {
            if (item2.stack == '总学时') {
                if (item2.name == trainClassHours) {
                    item2.data = item2.data.concat([item.trainClassHours]);
                    return
                } else {
                    const zongXueShi = {//总学时
                        name: trainClassHours,
                        type: 'line',
                        yAxisIndex: 1,
                        stack: '总学时',
                        data: [item.trainClassHours]
                    }
                    series.push(zongXueShi)
                    return
                }
            }
            if (item2.stack == '培训总数') {
                if (item2.name == trainCount) {
                    item2.data = item2.data.concat([item.trainCount])
                    return
                } else {
                    const peiXunZongShu = {//培训总数
                        name: trainCount,
                        type: 'bar',
                        stack: '培训总数',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [item.trainCount]
                    }
                    series.push(peiXunZongShu)
                    return
                }
            }
            if (item2.stack == '总人次') {
                if (item2.name == trainSigninNumber) {
                    item2.data = item2.data.concat([item.trainSigninNumber])
                    return
                } else {
                    const ZOngRenCi = {//总人次
                        name: trainSigninNumber,
                        type: 'bar',
                        stack: '总人次',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [item.trainSigninNumber]
                    }
                    series.push(ZOngRenCi)
                    return
                }
            }
        })
    } else {
        const zongXueShi = {//总学时
            name: trainClassHours,
            type: 'line',
            yAxisIndex: 1,
            stack: '总学时',
            data: [item.trainClassHours]
        }
        const peiXunZongShu = {//培训总数
            name: trainCount,
            type: 'bar',
            stack: '培训总数',
            emphasis: {
                focus: 'series'
            },
            data: [item.trainCount]
        }
        const ZOngRenCi = {//总人次
            name: trainSigninNumber,
            type: 'bar',
            stack: '总人次',
            emphasis: {
                focus: 'series'
            },
            data: [item.trainSigninNumber]
        }
        series.push(zongXueShi, peiXunZongShu, ZOngRenCi)
    }
})

const quchognBumenArr = [...new Set(bumenArr)]
const quchognHuodongArr = [...new Set(huodongArr)]
console.log('部门', quchognBumenArr)
console.log('类型统计', quchognHuodongArr)
console.log('数据series,', series)

理想数据结果应该是这样

    [
        {
            name: '类型1-总学时',
            data: [1, 111]
        },
        {
            name: '类型1-培训总数',
            data: [2, 222]
        },
        {
            name: '类型1-总人次',
            data: [3, 333]
        },
        {
            name: '类型2-总学时',
            data: [11, 1111]
        },
        {
            name: '类型2-培训总数',
            data: [22, 2222]
        },
        {
            name: '类型2-总人次',
            data: [33, 3333]
        }, {
            name: '类型3-总学时',
            data: [11111]
        },
        {
            name: '类型3-培训总数',
            data: [22222]
        },
        {
            name: '类型3-总人次',
            data: [33333]
        },
    ]

image.png

阅读 1.8k
2 个回答

根据目标数据分析,需要
1:根据type 归纳不同数据
2:根据部门对归纳后的数据进行排序

const data = [
  {
    departName: "部门1",
    trainClassHours: 1,
    trainCount: 2,
    trainSigninNumber: 3,
    typeName: "类型1"
  },
  {
    departName: "部门1",
    trainClassHours: 11,
    trainCount: 22,
    trainSigninNumber: 33,
    typeName: "类型2"
  },
  {
    departName: "部门2",
    trainClassHours: 111,
    trainCount: 222,
    trainSigninNumber: 333,
    typeName: "类型1"
  },
  {
    departName: "部门2",
    trainClassHours: 1111,
    trainCount: 2222,
    trainSigninNumber: 3333,
    typeName: "类型2"
  },
  {
    departName: "部门1",
    trainClassHours: 11111,
    trainCount: 22222,
    trainSigninNumber: 33333,
    typeName: "类型3"
  }
];

const departMap = {};
const typeMap = {};
data.forEach((item) => {
  // 按部门归纳数据
  if (!departMap[item.departName]) departMap[item.departName] = [];
  departMap[item.departName].push(item);

  // 按类型归纳数据
  if (!typeMap[item.typeName]) typeMap[item.typeName] = [];
  typeMap[item.typeName].push(item);
});

const series = [];
const departArr = Object.keys(departMap);
const typeArr = Object.keys(typeMap);
// 按照分类统计具体数据
typeArr.forEach((item) => {
  const num = [];
  const count = [];
  const time = [];
  // 统一按照部门顺序获取数据
  departArr.forEach((deaprt) => {
    const target =
      typeMap[item].find((type) => type.departName === deaprt) || {};
    num.push(target.trainSigninNumber);
    count.push(target.trainCount);
    time.push(target.trainClassHours);
  });
  // 插入series
  series.push(
    {
      type: "bar",
      stack: "参加人次",
      data: num
    },
    {
      type: "bar",
      stack: "活动次数",
      data: count
    },
    {
      type: "bar",
      stack: "活动时长",
      data: time
    }
  );
});
console.log("series", series);
const data = [
    { departName: '部门1', trainClassHours: 1, trainCount: 2, trainSigninNumber: 3, typeName: '类型1' },
    { departName: '部门1', trainClassHours: 11, trainCount: 22, trainSigninNumber: 33, typeName: '类型2' },
    { departName: '部门2', trainClassHours: 111, trainCount: 222, trainSigninNumber: 333, typeName: '类型1' },
    { departName: '部门2', trainClassHours: 1111, trainCount: 2222, trainSigninNumber: 3333, typeName: '类型2' },
    { departName: '部门1',trainClassHours: 11111,trainCount: 22222,trainSigninNumber: 33333,typeName: '类型3'},
]
let rowMap = {trainClassHours:'总学时',trainCount:'培训总数',trainSigninNumber:'总人次'};
let colArr = ['departName'];
// echarts 参数
let option ={
    legend:[],
    seriex:[],
    xAxis:[],
  };

//  根据字段参数和类型归并数据
let groupData = data.reduce((acc,cur,idx,arr)=>(
  colArr.forEach(col=>((acc.col[col]||=new Set()).add(cur[col]))),
  (Object.entries(rowMap).forEach(([key,keyName])=>(acc.row[`${cur.typeName}-${keyName}`]||=[]).push(cur[key]))),acc), {row:{},col:{}});
// 构造echarts 结构
Object.entries(groupData.row).forEach(([name,data])=>{
    option.legend.push(name);
    option.seriex.push({name,data});
 })
Object.entries(groupData.col).forEach(([name,data])=>{
    option.xAxis.push({data:Array.from(data)});
 })
console.log(option);

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题