echarts 数据展示 随后端数据变化而变化 showData多的展示为其他

import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import moment from 'moment';

const showData = [
  {
    date: '20211108',
    industryDetails: [
      {
        industryName: '贸易与零售',
        industryProportion: '5',
      },
      {
        industryName: '轻工',
        industryProportion: '7',
      },
      {
        industryName: '有色金属',
        industryProportion: '9',
      },
      {
        industryName: '国防军工',
        industryProportion: '1',
      },
      {
        industryName: '金融',
        industryProportion: '10',
      },
      {
        industryName: '食品',
        industryProportion: '11',
      },
    ],
  },
  {
    date: '20211115',
    industryDetails: [
      {
        industryName: '贸易与零售',
        industryProportion: '12',
      },
      {
        industryName: '轻工',
        industryProportion: '31',
      },
      {
        industryName: '有色金属',
        industryProportion: '43',
      },
      {
        industryName: '国防军工',
        industryProportion: '22',
      },
      {
        industryName: '金融',
        industryProportion: '43',
      },
      {
        industryName: '食品',
        industryProportion: '21',
      },
    ],
  },
  {
    date: '20211108',
    industryDetails: [
      {
        industryName: '贸易与零售',
        industryProportion: '54',
      },
      {
        industryName: '轻工',
        industryProportion: '34',
      },
      {
        industryName: '有色金属',
        industryProportion: '76',
      },
      {
        industryName: '国防军工',
        industryProportion: '21',
      },
      {
        industryName: '金融',
        industryProportion: '5',
      },
      {
        industryName: '食品',
        industryProportion: '76',
      },
    ],
  },
];

const data = [
  {
    date: '20211108',
    industryDetails: [
      {
        industryName: '贸易与零售',
        industryProportion: '5',
      },
      {
        industryName: '轻工',
        industryProportion: '7',
      },
      {
        industryName: '有色金属',
        industryProportion: '9',
      },
      {
        industryName: '国防军工',
        industryProportion: '1',
      },
    ],
  },
  {
    date: '20211115',
    industryDetails: [
      {
        industryName: '贸易与零售',
        industryProportion: '12',
      },
      {
        industryName: '轻工',
        industryProportion: '31',
      },
      {
        industryName: '有色金属',
        industryProportion: '43',
      },
      {
        industryName: '国防军工',
        industryProportion: '22',
      },
    ],
  },
  {
    date: '20211108',
    industryDetails: [
      {
        industryName: '贸易与零售',
        industryProportion: '54',
      },
      {
        industryName: '轻工',
        industryProportion: '34',
      },
      {
        industryName: '有色金属',
        industryProportion: '76',
      },
      {
        industryName: '国防军工',
        industryProportion: '21',
      },
    ],
  },
];

const Index = (props) => {
  console.log('全部数据：', showData);
  console.log('原始数据：', data);

  const tenpData = [];
  const xAxisData = [];
  (data || []).forEach((element) => { // 获取所有detail数据
    tenpData.push(...element?.industryDetails);
    xAxisData.push(moment(element.date + '').format('YYYY-MM-DD'));
  });
  console.log('x轴时间：', xAxisData);
  console.log('所有详情数据：', tenpData);

  // 将数据处理成echart需要的数据
  const datas = new Map();
  (tenpData || []).forEach((el) => {
    const old = datas.get(el.industryName) || []; // 之前存在的数据
    datas.set(el.industryName, [...old, (el.industryProportion * 100).toFixed(2)]); // 前 后合并 -- 现有数据
  });

  console.log('将数据处理成echart需要的数据：', datas);

  // 重构数据结构
  const result = [];
  (Array.from(datas) || []).forEach((el) => {
    result.push({
      key: el[0],
      value: el[1],
    });
  });

  console.log('重构数据结构：', result);

  const newQryTrendsData = [];
  const lastQryTrendsData = [];
  const other = [];
  (result || []).forEach((e) => {
    // 判断是否展示，还是在其它内
    const flag = showData.includes(e.key);
    if (flag) {
      newQryTrendsData.push(e);
    } else {
      other.push(e.value);
    }
  });

  // 其它数据的处理
  let otherA;
  if (other.length > 0) {
    otherA = other.reduce((r, a) => {
      (a || []).forEach((b, i) => {
        r[i] = (r[i] || 0) + Number(b);
      });
      return r;
    }, []);
  }
  console.log('其它数据的处理：', otherA);

  const obj = {};
  obj.key = '其他';
  obj.value = otherA || [];
  lastQryTrendsData.push(obj);
  console.log('最终展示数据：', lastQryTrendsData);

  return (
    <div>
      原始数据：
    </div>
  );
};

export default connect(
  ({ testM, multiAssetWorkbench, loading }) => ({ testM, multiAssetWorkbench, loading }),
  null,
)(Index);