x9适配

2026-05-26 18:46:41 +08:00
parent 0c9e42b91c
commit 47ea7d7b56
13 changed files with 1370 additions and 121 deletions
@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+import { getChartOps } from "@/lib/peqAudio";
+import { buildSubwooferLpfResponse } from "@/lib/subwooferLpf";
+
+type SubwooferLpfChartProps = {
+  cutoffHz: number;
+  rateIndex: number;
+  className?: string;
+};
+
+export default function SubwooferLpfChart({
+  cutoffHz,
+  rateIndex,
+  className,
+}: SubwooferLpfChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<echarts.ECharts | null>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const dataSet = buildSubwooferLpfResponse(cutoffHz, rateIndex);
+    const ops = getChartOps(dataSet, 0, -30, "#FFED00", false);
+    const series0 = ops.series[0];
+    if (series0 && "areaStyle" in series0) {
+      series0.areaStyle = {
+        opacity: 0.2,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#578400" },
+          { offset: 1, color: "#578400" },
+        ]),
+      };
+    }
+
+    if (!chartRef.current) {
+      chartRef.current = echarts.init(el, undefined, { renderer: "canvas" });
+    }
+    chartRef.current.setOption(ops, true);
+
+    const onResize = () => chartRef.current?.resize();
+    const ro = new ResizeObserver(onResize);
+    ro.observe(el);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", onResize);
+    };
+  }, [cutoffHz, rateIndex]);
+
+  useEffect(() => {
+    return () => {
+      chartRef.current?.dispose();
+      chartRef.current = null;
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={
+        className
+        ?? "w-full h-[min(42vw,200px)] min-h-[140px] md:h-[260px] lg:h-[300px] rounded-lg bg-black/30"
+      }
+      aria-hidden
+    />
+  );
+}