VisActor · xiaoluoHe · Aug 21, 2024 · Jun 26, 2024 · Jul 2, 2024 · Jul 2, 2024
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/vchart-theme-converter/.eslintrc.js b/packages/vchart-theme-converter/.eslintrc.js
@@ -0,0 +1,20 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  extends: ['@internal/eslint-config/profile/lib'],
+  overrides: [
+    {
+      files: ['**/demo/**', '**/*.test.ts'],
+      plugins: ['react'],
+      // 测试文件允许以下规则
+      rules: {
+        '@typescript-eslint/no-empty-function': 'off',
+        'no-console': 'off',
+        'dot-notation': 'off',
+        'promise/catch-or-return': 'off'
+      }
+    }
+  ],
+  parserOptions: { tsconfigRootDir: __dirname, project: './tsconfig.eslint.json' },
+  ignorePatterns: ['demo/**', 'bundler.config.js']
+};
diff --git a/packages/vchart-theme-converter/README.md b/packages/vchart-theme-converter/README.md
@@ -0,0 +1,44 @@
+# @visactor/vchart-theme-converter
+
+## Description
+
+This plugin currently supports the mutual conversion between VChart themes and ECharts themes.
+Currently supported features include():
+
+- series theme config: line/area/bar/pie/funnel
+- component theme config: axis/crosshair/tooltip/title/discreteLegend
+
+It is important to note that the theme conversion tool cannot completely cover the visual differences between the two chart libraries.
+
+## Usage
+
+```typescript
+import { echartsToVChart, vchartToEcharts } from '@visactor/vchart-theme-converter';
+import { VChart } from '@visactor/vchart';
+
+
+// convert echarts theme to vchart theme
+{
+  const echartsTheme = {...}
+  const vchartTheme = echartsToVChart(echartsTheme);
+}
+
+// convert vchart runtime theme to echarts theme
+{
+  const vchartTheme = VChart.ThemeManager.getCurrentTheme()
+  const echartsTheme = vchartToEcharts(echartsTheme);
+}
+
+// convert custom vchart theme to echarts theme
+{
+  /**
+   * When registering a custom VChart theme, it merges with the default theme to form a complete theme
+   * configuration;
+   * Therefore, it is recommended to register the custom theme first and obtain the complete theme configuration
+   * before converting a custom VChart theme.
+   */
+  const vchartTheme = {...};
+  VChart.ThemeManager.registerTheme('myTheme', vchartTheme);
+  const echartsTheme = vchartToEcharts(VChart.ThemeManager.getTheme('myTheme'));
+}
+```
diff --git a/packages/vchart-theme-converter/bundler.config.js b/packages/vchart-theme-converter/bundler.config.js
@@ -0,0 +1,13 @@
+/**
+ * @type {Partial<import('@dp/bundler').Config>}
+ */
+module.exports = {
+  formats: ['cjs', 'es', 'umd'],
+  outputDir: {
+    es: 'esm',
+    cjs: 'cjs',
+    umd: 'build'
+  },
+  name: 'VChartThemeConverter',
+  umdOutputFilename: 'index'
+};
diff --git a/packages/vchart-theme-converter/demo/index.html b/packages/vchart-theme-converter/demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VChart Theme Converter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>