Recharts动态遍历多个Area面积图

问题描述：当后台返回多个value时，意味着图形中有多条线，接下来就分析从后台传过来的数据源，然后对图形进行处理。

附上遍历成功后的面积图

data = [
  {time: "25-01", value: "5", valueY: "2"},
  {time: "25-02", value: "2", valueY: "6"},
  {time: "25-03", value: "8", valueY: "1"},
  {time: "25-04", value: "1", valueY: "9"},
  {time: "25-05", value: "5", valueY: "6"},
  {time: "25-06", value: "3", valueY: "7"},
  {time: "25-07", value: "3", valueY: "4"},
  {time: "25-08", value: "8", valueY: "3"},
  {time: "25-09", value: "9", valueY: "9"},
  {time: "25-10", value: "4", valueY: "7"},
  {time: "25-11", value: "7", valueY: "7"},
  {time: "25-12", value: "2", valueY: "1"},
  {time: "25-13", value: "4", valueY: "0"},
  {time: "25-14", value: "9", valueY: "1"},
  {time: "25-15", value: "1", valueY: "8"},
  {time: "25-16", value: "0", valueY: "2"},
  {time: "25-17", value: "8", valueY: "9"},
  {time: "25-18", value: "6", valueY: "5"},
  {time: "25-19", value: "9", valueY: "5"},
  {time: "25-20", value: "3", valueY: "6"},
  {time: "25-21", value: "1", valueY: "6"},
  {time: "25-22", value: "5", valueY: "8"},
  {time: "25-23", value: "9", valueY: "7"},
  {time: "26-00", value: "6", valueY: "7"},
]

value代表今日某时开销，valueY代表昨日某时的开销，因此图形中有二条Area。
主要代码如下:

import React, {PureComponent} from 'react';
import {
  AreaChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
  Legend, Scatter,
} from 'recharts';

const colors = ['#1b7fff', '#F04089']//设置2条Area的颜色
export default class DetailComposedArea extends PureComponent {
  render() {
    const colorIds = new Array(colors.length).fill(1).map(_ => new Date().getTime() + Math.random());
    const {width, height, data, names, delX} = this.props//拿到从父组件传过来的值
 
    //接下来要对遍历的Area数据源做处理
    const stringArr = Object.keys(data[0])   // ['time','value','valueY']
    stringArr.splice(stringArr.findIndex(item => item === delX), 1)//删除横坐标的time
    const chartData = stringArr  //chartData=['value','valueY']
    
    return (
      <AreaChart
        width={width}
        height={height}
        data={data}
      >
        <defs>
          {
            colors.map((color, i) => {
             //主要用来设置面积图的阴影部分的透明度
              //id全局必须唯一，每次render之后会影响后面的引用
              return (
                <linearGradient id={`color${colorIds[i]}`} x1="0" y1="0" x2="0" y2="1" key={i}>
                  <stop offset="12%" stopColor={color} stopOpacity={1}/>
                  <stop offset="100%" stopColor={color} stopOpacity={0}/>
                </linearGradient>
              );
            })
          }
        </defs>
        {
        //根据chartData的长度来遍历Area的个数
          chartData.map((item, i => {
            return (
              <Area key={i}
                    dataKey={item} // 取data数组中每个对象item的值
                    name={names[i]} //对应Area的名字
                    fill={`url(#color${colorIds[i]})`} //填充颜色
                    type="monotone"
                    animationDuration={500} 
                    stroke={colors[i]} //线条颜色
                    label={{position: 'top', fill: '#fff0', fontSize: 12}}
              />
            )
          })
        }
      </AreaChart>
    );
  }
}