advt-gpt-chart 可视化组件库

特性

• 📊 支持13+图表类型（折线图/柱状图/饼图/雷达图等）
• 🎨 内置Light/Dark双主题体系
• 📝 Markdown协议直接渲染图表

• 🛠 完善的TypeScript类型定义

安装依赖

npm install @advt-gpt-chart/package
pnpm install @advt-gpt-chart/package

使用

import { ConfigProvider, Line, GPTVis } from '@advt-gpt-chart/package';

function App() {

    const markdownContent = `
        以下是为你绘制的一个饼图
        \`\`\`vis-chart
        {
        "type": "pie",
        "data": [
            { "category": "分类一", "value": 27 },
            { "category": "分类二", "value": 25 },
            { "category": "分类三", "value": 18 },
            { "category": "分类四", "value": 15 },
            { "category": "分类五", "value": 10 },
            { "category": "其他", "value": 5 }
        ],
        "nameField": "category",
        "valField": "value"
        }
        \`\`\`
        `;

  return (
    <ConfigProvider theme="dark">
      {/* 直接使用图表组件 */}
      <Line data={[...]} />

      {/* 通过Markdown渲染 */}
      <GPTVis>
        {markdownContent}
      </GPTVis>
    </ConfigProvider>
  );
}