eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx

import React, { forwardRef, useRef, useEffect } from 'react'
import { Box, BoxProps } from '@mui/material'
import echarts from '../../../utils/chart'

interface StatsChartProps extends BoxProps {}

const StatsChart = forwardRef<typeof Box, StatsChartProps>(
  ({ ...props }, ref) => {
    const chartElemRef = useRef(null)
    const chartInsRef = useRef<echarts.ECharts | null>(null)

    useEffect(() => {
      if (!chartInsRef.current) {
        const chartIns = echarts.init(chartElemRef.current)
        const chartOptions = getChartOptions()
        chartIns.setOption(chartOptions)
        chartInsRef.current = chartIns
      }
    }, [])

    return <Box ref={chartElemRef} sx={{ width: 1, height: 1 }}></Box>
  }
)

StatsChart.displayName = 'StatsChart'
export default StatsChart

const getChartOptions = () => {
  return {
    grid: {
      top: 10,
      left: 40,
      right: 10,
      bottom: 20
    },
    xAxis: {
      type: 'category',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(92, 216, 244)'
            },
            {
              offset: 1,
              color: 'rgb(115, 189, 255)'
            }
          ])
        }
      }
    ]
  }
}