#

luxiaotao1123

2024-05-15 3f41ad8cf82b08585e89815feadb5a17938b3033

 src/pages/right/components/task-charts.jsx

@@ -1,9 +1,32 @@
import React from 'react';
import { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import { getTaskCharts } from '@/api/report';

const TasksCharts = () => {
  const backgroundColor = '#101736';
  const [seriesData, setSeriesData] = useState([
    { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] },
    { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] },
    { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] },
    { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] },
  ]);

  const [week, setWeek] = useState(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);

  useEffect(() => {
    const timer = setInterval(() => {
      getTaskCharts().then(res => {
        setSeriesData(res.data);
        setWeek(res.week);
        console.log(res);
      })
    }, 1000);

    return () => {
      clearInterval(timer);
    }
  }, []);

  const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
  const legend = {
    //data，就是取得每个series里面的name属性。
@@ -28,12 +51,6 @@
      type: 'shadow',
    },
  };
  let seriesData = [
    { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] },
    { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] },
    { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] },
    { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] },
  ];
  const commonConfigFn = (index) => {
    return {
      type: 'line',
@@ -76,7 +93,6 @@
    };
  };

  seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
  const option = {
    color,
    tooltip,
@@ -109,7 +125,7 @@
        show: false, //不显示grid竖向分割线
      },

      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      data: week,
    },
    yAxis: {
      type: 'value',
@@ -127,12 +143,12 @@
      },
    },

    series: seriesData,
    series: seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) })),
  };

  return (
    <div>
      <ReactECharts style={{ height: '280px' }} option={option} />
      <ReactECharts style={{ height: '360px' }} option={option} />
    </div>
  );
};