多数据折线图配置

export const lineData = [
  {
    num: 22,
    time: '2023-07-10',
    ripeness: 'A',
  },
  {
    num: 17,
    time: '2023-07-10',
    ripeness: 'B',
  },
  {
    num: 13,
    time: '2023-07-10',
    ripeness: 'C',
  },
  {
    num: 27,
    time: '2023-07-10',
    ripeness: 'D',
  },
  {
    num: 3,
    time: '2023-07-10',
    ripeness: 'E',
  },
  {
    num: 7,
    time: '2023-07-10',
    ripeness: 'F',
  },
  {
    num: 20,
    time: '2023-07-10',
    ripeness: 'OTHER',
  },
  {
    num: 20,
    time: '2023-07-11',
    ripeness: 'A',
  },
  {
    num: 8,
    time: '2023-07-11',
    ripeness: 'B',
  },
  {
    num: 12,
    time: '2023-07-11',
    ripeness: 'C',
  },
  {
    num: 3,
    time: '2023-07-11',
    ripeness: 'D',
  },
  {
    num: 4,
    time: '2023-07-11',
    ripeness: 'E',
  },
  {
    num: 9,
    time: '2023-07-11',
    ripeness: 'F',
  },
  {
    num: 38,
    time: '2023-07-11',
    ripeness: 'OTHER',
  },
  {
    num: 20,
    time: '2023-07-12',
    ripeness: 'A',
  },
  {
    num: 7,
    time: '2023-07-12',
    ripeness: 'B',
  },
  {
    num: 13,
    time: '2023-07-12',
    ripeness: 'C',
  },
  {
    num: 3,
    time: '2023-07-12',
    ripeness: 'D',
  },
  {
    num: 4,
    time: '2023-07-12',
    ripeness: 'E',
  },
  {
    num: 9,
    time: '2023-07-12',
    ripeness: 'F',
  },
  {
    num: 20,
    time: '2023-07-12',
    ripeness: 'OTHER',
  },
];

export const typeconfig = {
  A: { name: 'A级', color: 'rgb(190, 136, 46)' },
  B: { name: 'B级', color: 'rgb(165, 27, 255)' },
  C: { name: 'C级', color: 'rgb(122, 79, 247)' },
  D: { name: 'D级', color: 'rgb(127, 127, 127)' },
  E: { name: 'E级', color: 'rgb(88, 106, 135)' },
  F: { name: 'F级', color: 'rgb(67, 121, 103)' },
  OTHER: { name: '未标记', color: 'rgb(20, 135, 242)' },
};

 

 配置文件

//折线图
export const lineConfig = {
  option: {
    grid: {
      top: '15%',
      left: '4%',
      right: '2%',
      bottom: '20%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      x: 'center', // 'center' | 'left' | {number},
      y: 'top', // 'center' | 'bottom' | {number}
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {},
      },
      axisLabel: {
        interval: 0,
        show: true,
        rotate: -60,
        /*     formatter: function (value) {
          if (value) {
            if (value.length > 4) {
              return `${value.slice(0, 4)}...`;
            }
            return value;
          } else {
            return value;
          }
        }, */
      },
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      data: [],
    },
    yAxis: [
      {
        type: 'value',
        minInterval: 1,
        splitLine: {
          show: true,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [],
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 100,
      },
    ],
  },
};

 数据重组

  const [line, setLine] = useState(lineConfig); 
//图形统计
  const getPie = (data) => {
    const date = _.uniq(data.map((item, i) => item.time));
    const type = _.uniq(data.map((item, i) => item.ripeness));
    const typeData = type.map((item, i) => {
      return {
        type: item,
        color: typeconfig[item].color,
        name: `${typeconfig[item].name}案件`,
      };
    });
    let seriesData = [];
    typeData.map((item, i) => {
      let list = data.filter((d) => d.ripeness === item.type);
      let count = date.map((d) => {
        let number = list?.find((n) => n.time == d)?.num;
        return number;
      });
      seriesData.push({
        name: item.name,
        type: 'line',
        data: count,
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        itemStyle: { color: item.color },
      });
    });
    const reschart = _.cloneDeep(line);
    reschart.option.series = seriesData;
    reschart.option.xAxis.data = date;
    setLine({ ...reschart });
  };
//
 getPie(lineData);

 

 

chart组件 

  

/*
 * @Descripttion:
 * @Author: liuhongying
 * @Date: 2022-08-22 17:57:25
 * @LastEditors: liuhongying
 * @LastEditTime: 2023-07-13 18:18:53
 */
import { useRef, useState, useEffect } from 'react';
import { useModel } from 'umi';
import * as echarts from 'echarts';
export default (props) => {
  const { height, option } = props;
  const { initialState } = useModel('@@initialState');
  const chartRef = useRef(null);
  const myChart = useRef(null);

  const init = () => {
    if (!myChart.current) {
      myChart.current = echarts.init(chartRef.current);
    }
    setTimeout(() => {
      myChart.current.setOption(option);
    }, 100);
    //
    window.addEventListener('resize', () => {
      myChart.current.resize();
    });
    myChart.current.resize();
  };
  useEffect(() => {
    // echarts.init(chartRef.current).clear();
    setTimeout(() => {
      init();
    }, 100);
  }, [props, initialState.collapse, chartRef.current]);

  return (
    

  );
};