图表组件演示

这个页面展示了如何在 MDX 中使用图表组件。

线图示例

{
  "data": [
    {"name": "1月", "value": 400},
    {"name": "2月", "value": 300},
    {"name": "3月", "value": 600},
    {"name": "4月", "value": 800},
    {"name": "5月", "value": 500},
    {"name": "6月", "value": 700}
  ],
  "xKey": "name",
  "yKey": "value"
}

柱状图示例

{
  "data": [
    {"name": "React", "value": 88},
    {"name": "Vue", "value": 70},
    {"name": "Angular", "value": 60},
    {"name": "Svelte", "value": 45},
    {"name": "Next.js", "value": 82}
  ],
  "xKey": "name",
  "yKey": "value"
}

面积图示例

{"data":[{"name":"Q1","value":1200},{"name":"Q2","value":1900},{"name":"Q3","value":2400},{"name":"Q4","value":2800}],"xKey":"name","yKey":"value"}

饼图示例

{"data":[{"name":"桌面端","value":45},{"name":"移动端","value":35},{"name":"平板端","value":20}],"xKey":"name","yKey":"value"}

多系列线图示例

{"data":[{"name":"1月","销售额":250,"利润":400},{"name":"2月","销售额":150,"利润":300},{"name":"3月","销售额":380,"利润":600},{"name":"4月","销售额":390,"利润":800},{"name":"5月","销售额":470,"利润":500},{"name":"6月","销售额":370,"利润":700}],"xKey":"name","series":["销售额","利润"]}

使用说明

基本结构

每个图表都需要包装在 ChartContainer 中：

<ChartContainer config={chartConfig} className="h-[300px]">
  <LineChart data={data}>{/* 图表内容 */}</LineChart>
</ChartContainer>

配置对象

chartConfig 定义了数据系列的标签和颜色：

export const chartConfig = {
  value: {
    label: "数值标签",
    color: "hsl(var(--chart-1))",
  },
};

数据格式

数据应该是对象数组：

export const data = [
  { name: "标签1", value: 100 },
  { name: "标签2", value: 200 },
];

可用组件

现在你可以在 MDX 中使用以下组件：

ChartContainer: 图表容器
ChartTooltip, ChartTooltipContent: 工具提示
ChartLegend, ChartLegendContent: 图例
LineChart, Line: 线图
BarChart, Bar: 柱状图
AreaChart, Area: 面积图
PieChart, Pie, Cell: 饼图
XAxis, YAxis: 坐标轴
CartesianGrid: 网格线

所有这些组件都已经集成到 MDX 环境中，可以直接使用！