ruoyi-react-front/app/(other)/test7/components/queue-gauge.tsx

"use client"
import ReactECharts from "echarts-for-react"
import type {FC} from "react"

const QueueGauge: FC<{ backlog: number; throughput: number }> = ({ backlog = 0, throughput = 120 }) => {
  const lvl = Math.min(100, Math.round((backlog / 50) * 100))
  const option = {
    tooltip: { formatter: "{a}<br/>{b}: {c}%" },
    series: [
      {
        name: "队列积压",
        type: "gauge",
        radius: "90%",
        startAngle: 210,
        endAngle: -30,
        min: 0,
        max: 100,
        progress: { show: true, width: 16 },
        axisLine: { lineStyle: { width: 16 } },
        pointer: { show: true, length: "60%" },
        detail: { valueAnimation: true, formatter: "{value}%" },
        data: [{ value: lvl, name: "积压率" }],
      },
    ],
  }
  return (
    <div>
      <ReactECharts option={option as any} style={{ height: 220, width: "100%" }} notMerge />
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <div>Backlog: {backlog} 条</div>
        <div>吞吐: {throughput}/s</div>
      </div>
    </div>
  )
}

export default QueueGauge