init

src/pages/Dashboard/components/EchartsProgress/index.jsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+import "./index.css";
+
+const EchartsProgress = ({
+  percent = 60,
+  strokeWidth = 20,
+  progressColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: "#0275F2" },
+    { offset: 1, color: "#389CFA" },
+  ]), // 进度条颜色，默认为渐变色
+  backgroundColor = "#0275F21A", // 背景颜色
+}) => {
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+
+  useEffect(() => {
+    // 初始化图表
+    if (chartRef.current && !chartInstance.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+    }
+
+    // 配置图表选项 - 得分环
+    const option = {
+      series: [
+        {
+          type: "gauge",
+          startAngle: -90,
+          endAngle: 270,
+          pointer: {
+            show: false,
+          },
+          progress: {
+            show: true,
+            overlap: false,
+            roundCap: true,
+            clip: false,
+            itemStyle: {
+              borderWidth: 0,
+              color: progressColor, // 设置进度条颜色
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              width: strokeWidth,
+              color: [
+                [1, backgroundColor], // 背景颜色
+              ],
+            },
+          },
+          splitLine: {
+            show: false,
+            distance: 0,
+            length: 10,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+            distance: 50,
+          },
+          data: [
+            {
+              value: 75,
+              detail: {
+                valueAnimation: true,
+                offsetCenter: ["0%", "0%"],
+              },
+            },
+          ],
+          detail: {
+            width: 50,
+            height: 14,
+            fontSize: 34,
+            color: "#262626",
+            formatter: "{value}%",
+          },
+        },
+      ],
+    };
+
+    // 设置图表选项
+    chartInstance.current.setOption(option);
+
+    // 响应窗口大小变化
+    const resizeHandler = () => {
+      chartInstance.current.resize();
+    };
+
+    window.addEventListener("resize", resizeHandler);
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+    };
+  }, [percent, strokeWidth]);
+
+  return <div ref={chartRef} className="progress-chart" />;
+};
+
+export default EchartsProgress;