@cube-chart/render

轻量级图表渲染组件，用于在应用中展示图表。

特性

• 📦 轻量级，无编辑器依赖
• 🚀 高性能渲染，基于 VChart
• 🎨 支持多种图表类型（折线图、柱状图、饼图等）
• 📱 响应式设计，自适应容器大小
• 🔌 易于集成，支持 Vanilla JS 和 React

安装

npm install @cube-chart/render

快速开始

Vanilla JavaScript

import { ChartRenderer } from '@cube-chart/render';
import '@cube-chart/render/style.css';

const renderer = new ChartRenderer({
  container: '#chart-container',
  config: {
    type: 'line',
    data: {
      values: [
        { x: '2024-01', y: 100 },
        { x: '2024-02', y: 150 },
        { x: '2024-03', y: 200 }
      ]
    },
    xField: 'x',
    yField: 'y'
  }
});

// 渲染图表
renderer.render();

// 更新数据
renderer.updateData(newData);

// 销毁
renderer.destroy();

React

import { ChartRenderer } from '@cube-chart/render/react';
import '@cube-chart/render/style.css';

function App() {
  const config = {
    type: 'line',
    data: {
      values: [
        { x: '2024-01', y: 100 },
        { x: '2024-02', y: 150 }
      ]
    },
    xField: 'x',
    yField: 'y'
  };

  return (
    <ChartRenderer 
      config={config}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

API 文档

ChartRenderer

构造函数选项

interface ChartRendererOptions {
  container: string | HTMLElement;  // 容器元素或选择器
  config: ChartConfig;               // 图表配置
  theme?: string;                    // 主题名称
  responsive?: boolean;              // 是否响应式，默认 true
}

方法

• render(): 渲染图表
• updateConfig(config): 更新图表配置
• updateData(data): 更新图表数据
• resize(): 手动触发图表大小调整
• destroy(): 销毁图表实例

事件

renderer.on('rendered', () => {
  console.log('图表渲染完成');
});

renderer.on('dataUpdated', (data) => {
  console.log('数据已更新', data);
});

renderer.on('error', (error) => {
  console.error('渲染错误', error);
});

支持的图表类型

• line - 折线图
• bar - 柱状图
• pie - 饼图
• area - 面积图
• scatter - 散点图
• gauge - 仪表盘
• funnel - 漏斗图
• radar - 雷达图

License

MIT