ci4sManagement-cloud/react-ui/src/pages/Model/components/MetricsChart/index.tsx

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import styles from './index.less';
import './tooltip.css';

const colors = [
  '#0D5EF8',
  '#6AC21D',
  '#F98E1B',
  '#ECB934',
  '#8A34EC',
  '#FF1493',
  '#FFFF00',
  '#DAA520',
  '#CD853F',
  '#FF6347',
  '#808080',
  '#00BFFF',
  '#008000',
  '#00FFFF',
  '#FFFACD',
  '#FFA500',
  '#FF4500',
  '#800080',
  '#FF1493',
  '#000080',
];

const backgroundColor = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#ffffff' },
    { offset: 1, color: '#fdfeff' },
  ],
  false,
);

function getTooltip(xTitle: string, xValue: number, yTitle: string, yValue: number) {
  const str = `<div class="metrics-tooltip">
      <span class="y-text">Y:</span>
      <span class="x-text">X:</span>
      <div class="title">${yTitle}</div>
      <div class="value">${yValue}</div>
      <div class="title" style="margin-top: 10px">${xTitle}</div>
      <div class="value">${xValue}</div>
    <div>`;
  return str;
}

export type MetricsChatData = {
  name: string;
  values: number[];
  version: string;
  iters: number[];
};

export type MetricsChartProps = {
  name: string;
  chartData: MetricsChatData[];
};

function MetricsChart({ name, chartData }: MetricsChartProps) {
  const chartRef = useRef<HTMLDivElement>(null);
  const xAxisData = chartData[0]?.iters;
  const seriesData = chartData.map((item) => {
    return {
      name: item.version,
      type: 'line' as const,
      smooth: true,
      data: item.values,
    };
  });

  const options: echarts.EChartsOption = {
    backgroundColor: backgroundColor,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'item',
      padding: 10,
      formatter: (params: any) => {
        const { name: xTitle, data } = params;
        return getTooltip('step', xTitle, name, data);
      },
    },
    legend: {
      bottom: 10,
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      textStyle: {
        color: 'rgba(29, 29, 32, 0.75)',
        fontSize: 12,
      },
    },
    color: colors,
    grid: {
      left: '15',
      right: '15',
      top: '20',
      bottom: '60',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      offset: 10,
      data: xAxisData,
      axisLabel: {
        color: 'rgba(29, 29, 32, 0.75)',
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#eaeaea',
          width: 1,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(29, 29, 32, 0.75)',
        fontSize: 12,
        margin: 15,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: '#e4e4e4',
          width: 1,
          type: 'dashed',
        },
      },
    },
    series: seriesData,
  };

  useEffect(() => {
    // 创建一个echarts实例，返回echarts实例
    const chart = echarts.init(chartRef.current);

    // 设置图表实例的配置项和数据
    chart.setOption(options);

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例
      chart.dispose();
    };
  }, []);

  return (
    <div className={styles['metrics-chart']}>
      <div className={styles['metrics-chart__title']}>
        <img src={require('@/assets/img/metrics-title-icon.png')}></img>
        <span>{name}</span>
      </div>
      <div className={styles['metrics-chart__chart']} ref={chartRef}></div>
    </div>
  );
}

export default MetricsChart;