54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"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 }} />;
|
|
}
|