ex-circle-grid-echarts-radar-chart

1"use client";
2 
3import { EChartsRadarChart, type ChartConfig } from "@/registry/charts/echarts-radar-chart";
4 
5const data = [
6  { skill: "JavaScript", desktop: 186, mobile: 80 },
7  { skill: "TypeScript", desktop: 305, mobile: 200 },
8  { skill: "React", desktop: 237, mobile: 120 },
9  { skill: "Node.js", desktop: 173, mobile: 190 },
10  { skill: "CSS", desktop: 209, mobile: 130 },
11  { skill: "Python", desktop: 214, mobile: 140 },
12];
13 
14const chartConfig = {
15  desktop: {
16    label: "Desktop",
17    colors: {
18      light: ["#3b82f6"],
19      dark: ["#60a5fa"],
20    },
21  },
22  mobile: {
23    label: "Mobile",
24    colors: {
25      light: ["#10b981"],
26      dark: ["#34d399"],
27    },
28  },
29} satisfies ChartConfig;
30 
31export function EChartsExampleRadarChart() {
32  return (
33    <EChartsRadarChart data={data} config={chartConfig} className="h-full w-full p-4">
34      <EChartsRadarChart.PolarGrid
35        gridType="circle" // [!code highlight]
36      />
37      <EChartsRadarChart.PolarAngleAxis dataKey="skill" />
38      <EChartsRadarChart.Legend />
39      <EChartsRadarChart.Tooltip />
40      <EChartsRadarChart.Radar dataKey="desktop" variant="filled">
41        <EChartsRadarChart.Dot variant="colored-border" />
42        <EChartsRadarChart.ActiveDot variant="default" />
43      </EChartsRadarChart.Radar>
44      <EChartsRadarChart.Radar dataKey="mobile" variant="filled">
45        <EChartsRadarChart.Dot variant="colored-border" />
46        <EChartsRadarChart.ActiveDot variant="default" />
47      </EChartsRadarChart.Radar>
48    </EChartsRadarChart>
49  );
50}