's'

components/insight-extra-charts.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import ReactECharts from "echarts-for-react";
+import { baseGrid, chartTheme } from "@/lib/echarts-theme";
+
+export function InsightBarChart() {
+  const option = {
+    textStyle: { color: chartTheme.text },
+    tooltip: { trigger: "axis" },
+    grid: baseGrid(),
+    xAxis: {
+      type: "category",
+      axisLabel: { color: chartTheme.axis },
+      data: ["AI 工具", "媒体工具", "设计工具", "开发工具", "网络工具"],
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: { color: chartTheme.axis },
+      splitLine: { lineStyle: { color: chartTheme.split } },
+    },
+    series: [
+      {
+        type: "bar",
+        data: [34, 24, 18, 14, 10],
+        itemStyle: { borderRadius: [8, 8, 0, 0], color: chartTheme.bar },
+      },
+    ],
+  };
+  return <ReactECharts option={option} style={{ height: 280 }} />;
+}
+
+export function InsightPieChart() {
+  const option = {
+    textStyle: { color: chartTheme.text },
+    tooltip: { trigger: "item" },
+    legend: { bottom: 0, textStyle: { color: chartTheme.subText } },
+    series: [
+      {
+        type: "pie",
+        radius: ["45%", "72%"],
+        itemStyle: { borderRadius: 8, borderColor: "#020617", borderWidth: 2 },
+        label: { color: chartTheme.text },
+        data: [
+          { value: 42, name: "自然搜索", itemStyle: { color: chartTheme.pieA } },
+          { value: 27, name: "公众号", itemStyle: { color: chartTheme.pieB } },
+          { value: 16, name: "社群", itemStyle: { color: chartTheme.pieC } },
+          { value: 15, name: "外链", itemStyle: { color: chartTheme.pieD } },
+        ],
+      },
+    ],
+  };
+  return <ReactECharts option={option} style={{ height: 280 }} />;
+}