在本地展示数据的可视化工具，效果如下：
访问网页：https://conanyu.github.io/data-viewer
在开始之前，需要保证已经安装了以下工具：
克隆项目并进入项目目录安装依赖部署：
git clone https://github.com/conanyu/data-viewer.git
cd data-viewer/app/page
pnpm install
pnpm dev成功部署后，在浏览器中访问 http://localhost:5173/data-viewer 即可查看应用。
-
使用SDK前需要保证shadcn框架已安装，具体安装方法请参考：https://ui.shadcn.com/docs/installation
-
添加本项目依赖
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/ConanYu/data-viewer/refs/heads/main/app/shadcn/data-viewer.json- 引入组件
import { DataViewer } from "@/components/ui/conanyu/data-viewer";
const data = {
users: [
{ id: 1, name: "Alice", age: 30 },
{ id: 2, name: "Bob", age: 25 },
{ id: 3, name: "Charlie", age: 35 },
],
metadata: {
createdAt: "2023-01-15",
source: "API",
},
};
const App = () => {
return <DataViewer title="Data Viewer Demo" data={JSON.stringify(data)} />;
};本项目基于 MIT 协议开源，您可以在遵守协议的前提下自由使用、修改和分发本项目的代码。