@cube-chart/editor

完整的图表编辑器组件，提供可视化图表配置能力。

特性

• ✏️ 可视化编辑界面
• 🔧 丰富的配置选项（数据源、样式、交互等）
• 💾 配置导入导出
• 🔌 易于集成，支持 Vanilla JS 和 React
• 📊 实时预览
• 🎨 主题定制

安装

npm install @cube-chart/editor

快速开始

Vanilla JavaScript

import { ChartEditor } from '@cube-chart/editor';
import '@cube-chart/editor/style.css';

const editor = new ChartEditor({
  container: '#editor-container',
  mode: 'full', // 'full' | 'simple'
  config: {
    type: 'line',
    data: {
      values: []
    }
  },
  apiConfig: {
    baseURL: 'https://api.example.com',
    endpoints: {
      dataSources: '/api/datasources',
      save: '/api/charts'
    }
  }
});

// 监听配置变化
editor.on('configChanged', (config) => {
  console.log('配置已更新', config);
});

// 保存配置
editor.on('save', async (config) => {
  await saveChart(config);
});

// 获取当前配置
const config = editor.getConfig();

// 销毁
editor.destroy();

React

import { ChartEditor } from '@cube-chart/editor/react';
import '@cube-chart/editor/style.css';

function App() {
  const handleConfigChange = (config) => {
    console.log('配置变化', config);
  };

  const handleSave = async (config) => {
    await saveChart(config);
  };

  return (
    <ChartEditor
      mode="full"
      config={{
        type: 'line',
        data: { values: [] }
      }}
      apiConfig={{
        baseURL: 'https://api.example.com'
      }}
      onConfigChange={handleConfigChange}
      onSave={handleSave}
    />
  );
}

API 文档

ChartEditor

构造函数选项

interface ChartEditorOptions {
  container: string | HTMLElement;  // 容器元素或选择器
  mode?: 'full' | 'simple';         // 编辑器模式
  config?: ChartConfig;              // 初始图表配置
  apiConfig?: APIConfig;             // API 配置
  theme?: string;                    // 主题
  locale?: string;                   // 语言
}

方法

• getConfig(): 获取当前配置
• setConfig(config): 设置配置
• validate(): 验证配置
• reset(): 重置配置
• destroy(): 销毁编辑器

事件

editor.on('configChanged', (config) => {});
editor.on('save', (config) => {});
editor.on('cancel', () => {});
editor.on('error', (error) => {});

编辑器模式

Full Mode (完整模式)

提供完整的编辑功能：

• 数据源配置
• 图表类型选择
• 样式定制
• 交互配置
• 高级选项

Simple Mode (简单模式)

提供简化的编辑界面：

• 基础图表类型
• 简单数据配置
• 预设样式

配置示例

const config = {
  type: 'line',
  data: {
    values: [
      { date: '2024-01', sales: 100 },
      { date: '2024-02', sales: 150 }
    ]
  },
  xField: 'date',
  yField: 'sales',
  title: '销售趋势',
  theme: 'light',
  legend: {
    visible: true,
    position: 'right'
  },
  tooltip: {
    visible: true
  }
};

License

MIT