Vega-Lite 可视化组件使用指南

学习如何使用 Vega-Lite 组件创建声明式数据可视化图表

2025年1月16日 1 分钟

本文介绍如何在博客中使用 Vega-Lite 组件创建声明式数据可视化。

基础柱状图

散点图

折线图

使用方式

import { VegaLite } from '@/components/mdx';

<VegaLite
  spec={{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": { "values": [...] },
    "mark": "bar",
    "encoding": {...}
  }}
  height={300}
/>