diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/.npmignore b/packages/plugins/@gemel/plugin-add-custom-charts/.npmignore
new file mode 100644
index 0000000000..65f5e8779f
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/.npmignore
@@ -0,0 +1,2 @@
+/node_modules
+/src
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/README.md b/packages/plugins/@gemel/plugin-add-custom-charts/README.md
new file mode 100644
index 0000000000..364c81cc0d
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/README.md
@@ -0,0 +1 @@
+# @gemel/plugin-add-custom-charts
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/client.d.ts b/packages/plugins/@gemel/plugin-add-custom-charts/client.d.ts
new file mode 100644
index 0000000000..6c459cbac4
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/client.d.ts
@@ -0,0 +1,2 @@
+export * from './dist/client';
+export { default } from './dist/client';
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/client.js b/packages/plugins/@gemel/plugin-add-custom-charts/client.js
new file mode 100644
index 0000000000..b6e3be70e6
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/client.js
@@ -0,0 +1 @@
+module.exports = require('./dist/client/index.js');
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/package.json b/packages/plugins/@gemel/plugin-add-custom-charts/package.json
new file mode 100644
index 0000000000..a66f0bb253
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@gemel/plugin-add-custom-charts",
+  "version": "1.4.0-alpha.15",
+  "main": "dist/server/index.js",
+  "displayName": "Add Custom Charts",
+  "displayName.zh-CN": "添加自定义图表",
+  "description": "Add custom charts",
+  "description.zh-CN": "添加自定义图表",
+  "peerDependencies": {
+    "@nocobase/client": "1.x",
+    "@nocobase/server": "1.x",
+    "@nocobase/test": "1.x"
+  },
+  "devDependencies": {
+    "deepmerge": "^4.3.1",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2"
+  }
+}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/server.d.ts b/packages/plugins/@gemel/plugin-add-custom-charts/server.d.ts
new file mode 100644
index 0000000000..c41081ddc6
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/server.d.ts
@@ -0,0 +1,2 @@
+export * from './dist/server';
+export { default } from './dist/server';
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/server.js b/packages/plugins/@gemel/plugin-add-custom-charts/server.js
new file mode 100644
index 0000000000..972842039a
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/server.js
@@ -0,0 +1 @@
+module.exports = require('./dist/server/index.js');
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/client.d.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/client.d.ts
new file mode 100644
index 0000000000..4e96f83fa1
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/client.d.ts
@@ -0,0 +1,249 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string };
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.less' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.styl' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.stylus' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.pcss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.sss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+
+// CSS
+declare module '*.css' { }
+declare module '*.scss' { }
+declare module '*.sass' { }
+declare module '*.less' { }
+declare module '*.styl' { }
+declare module '*.stylus' { }
+declare module '*.pcss' { }
+declare module '*.sss' { }
+
+// Built-in asset types
+// see `src/node/constants.ts`
+
+// images
+declare module '*.apng' {
+  const src: string;
+  export default src;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jfif' {
+  const src: string;
+  export default src;
+}
+declare module '*.pjpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.pjp' {
+  const src: string;
+  export default src;
+}
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+declare module '*.ico' {
+  const src: string;
+  export default src;
+}
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+// media
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+declare module '*.webm' {
+  const src: string;
+  export default src;
+}
+declare module '*.ogg' {
+  const src: string;
+  export default src;
+}
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}
+declare module '*.flac' {
+  const src: string;
+  export default src;
+}
+declare module '*.aac' {
+  const src: string;
+  export default src;
+}
+declare module '*.opus' {
+  const src: string;
+  export default src;
+}
+declare module '*.mov' {
+  const src: string;
+  export default src;
+}
+declare module '*.m4a' {
+  const src: string;
+  export default src;
+}
+declare module '*.vtt' {
+  const src: string;
+  export default src;
+}
+
+// fonts
+declare module '*.woff' {
+  const src: string;
+  export default src;
+}
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}
+declare module '*.eot' {
+  const src: string;
+  export default src;
+}
+declare module '*.ttf' {
+  const src: string;
+  export default src;
+}
+declare module '*.otf' {
+  const src: string;
+  export default src;
+}
+
+// other
+declare module '*.webmanifest' {
+  const src: string;
+  export default src;
+}
+declare module '*.pdf' {
+  const src: string;
+  export default src;
+}
+declare module '*.txt' {
+  const src: string;
+  export default src;
+}
+
+// wasm?init
+declare module '*.wasm?init' {
+  const initWasm: (options?: WebAssembly.Imports) => Promise<WebAssembly.Instance>;
+  export default initWasm;
+}
+
+// web worker
+declare module '*?worker' {
+  const workerConstructor: {
+    new(options?: { name?: string }): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module '*?worker&inline' {
+  const workerConstructor: {
+    new(options?: { name?: string }): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module '*?worker&url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?sharedworker' {
+  const sharedWorkerConstructor: {
+    new(options?: { name?: string }): SharedWorker;
+  };
+  export default sharedWorkerConstructor;
+}
+
+declare module '*?sharedworker&inline' {
+  const sharedWorkerConstructor: {
+    new(options?: { name?: string }): SharedWorker;
+  };
+  export default sharedWorkerConstructor;
+}
+
+declare module '*?sharedworker&url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?raw' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?inline' {
+  const src: string;
+  export default src;
+}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/ReactEcharts.tsx b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/ReactEcharts.tsx
new file mode 100644
index 0000000000..5716ac7d93
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/ReactEcharts.tsx
@@ -0,0 +1,19 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useEffect } from 'react';
+import ReactEChartsComponent, { EChartsInstance, EChartsReactProps } from 'echarts-for-react';
+
+export const ReactECharts = (props: EChartsReactProps['option']) => {
+  const echartRef = React.useRef<EChartsInstance>();
+  useEffect(() => {
+    echartRef.current?.resize();
+  });
+  return <ReactEChartsComponent option={props} ref={(e) => (echartRef.current = e)} />;
+};
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/bar.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/bar.ts
new file mode 100644
index 0000000000..9aa768c1c5
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/bar.ts
@@ -0,0 +1,51 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { RenderProps } from '@nocobase/plugin-data-visualization/client';
+import { ECharts } from './echarts';
+
+export class Bar extends ECharts {
+  constructor() {
+    super({
+      name: 'bar',
+      title: 'Bar Chart',
+      series: { type: 'bar' },
+    });
+    this.config = [
+      {
+        configType: 'field',
+        title: 'xField',
+      },
+      {
+        configType: 'field',
+        title: 'yField',
+      },
+      'seriesField',
+    ];
+  }
+
+  getProps({ data, general, advanced, fieldProps }: RenderProps) {
+    const props = super.getProps({ data, general, advanced, fieldProps });
+    const xLabel = fieldProps[general.xField]?.label;
+    const yLabel = fieldProps[general.yField]?.label;
+    props.xAxis = {
+      ...props.xAxis,
+      type: 'value',
+      name: xLabel,
+    };
+    props.yAxis = {
+      ...props.yAxis,
+      name: yLabel,
+    };
+
+    return props;
+  }
+}
+
+new Bar();
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/echarts.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/echarts.ts
new file mode 100644
index 0000000000..8e8cace4b0
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/echarts.ts
@@ -0,0 +1,103 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Chart, ChartProps, ChartType, RenderProps } from '@nocobase/plugin-data-visualization/client';
+import { ReactECharts } from './ReactEcharts';
+import deepmerge from 'deepmerge';
+
+export class ECharts extends Chart {
+  series: any;
+  constructor({
+    name,
+    title,
+    series,
+    config,
+  }: {
+    name: string;
+    title: string;
+    series: any;
+    config?: ChartProps['config'];
+  }) {
+    super({
+      name,
+      title,
+      Component: ReactECharts,
+      config: ['xField', 'yField', 'seriesField', ...(config || [])],
+    });
+    this.series = series;
+  }
+
+  init: ChartType['init'] = (fields, { measures, dimensions }) => {
+    const { xField, yField, seriesField } = this.infer(fields, {
+      measures,
+      dimensions,
+    });
+    return {
+      general: {
+        xField: xField?.value,
+        yField: yField?.value,
+        seriesField: seriesField?.value,
+      },
+    };
+  };
+
+  getProps({ data, general, advanced, fieldProps }: RenderProps) {
+    console.log('data:-----', data);
+    console.log('general:-----', general);
+    console.log('advanced:-----', advanced);
+    console.log('fieldProps:-----', fieldProps);
+
+    const { xField, yField, seriesField } = general;
+    const xLabel = fieldProps[xField]?.label;
+    const yLabel = fieldProps[yField]?.label;
+    let seriesName = [yLabel];
+    if (seriesField) {
+      seriesName = Array.from(new Set(data.map((row: any) => row[seriesField]))).map((value) => value || 'null');
+    }
+    const result = deepmerge(
+      {
+        dataset: [
+          {
+            dimensions: [xField, ...(seriesField ? seriesName : [yField])],
+            source: data,
+          },
+        ],
+        series: seriesName.map((name) => ({
+          name,
+          // datasetIndex: 1,
+          ...this.series,
+          encode: {
+            x: xField,
+            y: yField,
+          },
+        })),
+        xAxis: {
+          name: xLabel,
+          type: 'category',
+        },
+        yAxis: {
+          name: yLabel,
+          type: 'category',
+        },
+        animation: false,
+      },
+      advanced,
+    );
+
+    console.log('result:--------', result);
+    return result;
+  }
+
+  getReference() {
+    return {
+      title: 'ECharts',
+      link: 'https://echarts.apache.org/en/option.html',
+    };
+  }
+}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/index.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/index.ts
new file mode 100644
index 0000000000..22d8c99bfd
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/index.ts
@@ -0,0 +1,13 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './echarts';
+export * from './pie';
+export * from './bar';
+export * from './line';
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/line.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/line.ts
new file mode 100644
index 0000000000..dbf284c8f7
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/line.ts
@@ -0,0 +1,165 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { RenderProps } from '@nocobase/plugin-data-visualization/client';
+import { ECharts } from './echarts';
+
+export class Line extends ECharts {
+  constructor() {
+    super({
+      name: 'line',
+      title: 'Line Chart',
+      series: { type: 'line' },
+    });
+    this.config = [
+      {
+        configType: 'field',
+        title: 'xField',
+      },
+      {
+        configType: 'field',
+        title: 'yField',
+      },
+      'seriesField',
+    ];
+  }
+
+  getProps({ data, general, advanced, fieldProps }: RenderProps) {
+    const props = super.getProps({ data, general, advanced, fieldProps });
+    const xLabel = fieldProps[general.xField]?.label;
+    const yLabel = fieldProps[general.yField]?.label;
+    props.xAxis = {
+      ...props.xAxis,
+      name: xLabel,
+      type: 'time',
+    };
+    props.yAxis = {
+      ...props.yAxis,
+      name: yLabel,
+      type: 'category',
+    };
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      legend: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: 'Direct',
+          type: 'bar',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [320, 332, 301, 334, 390, 330, 320],
+        },
+        {
+          name: 'Email',
+          type: 'bar',
+          stack: 'Ad',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [120, 132, 101, 134, 90, 230, 210],
+        },
+        {
+          name: 'Union Ads',
+          type: 'bar',
+          stack: 'Ad',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [220, 182, 191, 234, 290, 330, 310],
+        },
+        {
+          name: 'Video Ads',
+          type: 'bar',
+          stack: 'Ad',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [150, 232, 201, 154, 190, 330, 410],
+        },
+        {
+          name: 'Search Engine',
+          type: 'bar',
+          data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+          emphasis: {
+            focus: 'series',
+          },
+          markLine: {
+            lineStyle: {
+              type: 'dashed',
+            },
+            data: [[{ type: 'min' }, { type: 'max' }]],
+          },
+        },
+        {
+          name: 'Baidu',
+          type: 'bar',
+          barWidth: 5,
+          stack: 'Search Engine',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [620, 732, 701, 734, 1090, 1130, 1120],
+        },
+        {
+          name: 'Google',
+          type: 'bar',
+          stack: 'Search Engine',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [120, 132, 101, 134, 290, 230, 220],
+        },
+        {
+          name: 'Bing',
+          type: 'bar',
+          stack: 'Search Engine',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [60, 72, 71, 74, 190, 130, 110],
+        },
+        {
+          name: 'Others',
+          type: 'bar',
+          stack: 'Search Engine',
+          emphasis: {
+            focus: 'series',
+          },
+          data: [62, 82, 91, 84, 109, 110, 120],
+        },
+      ],
+    };
+  }
+}
+
+new Line();
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/pie.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/pie.ts
new file mode 100644
index 0000000000..867c52d964
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/echarts/pie.ts
@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ChartType, RenderProps } from '@nocobase/plugin-data-visualization/client';
+import { ECharts } from './echarts';
+import deepmerge from 'deepmerge';
+
+export class Pie extends ECharts {
+  constructor() {
+    super({
+      name: 'pie',
+      title: 'Pie Chart',
+      series: { type: 'pie' },
+    });
+    this.config = [
+      {
+        configType: 'field',
+        name: 'angleField',
+        title: 'angleField',
+        required: true,
+      },
+      {
+        configType: 'field',
+        name: 'colorField',
+        title: 'colorField',
+        required: true,
+      },
+    ];
+  }
+
+  init: ChartType['init'] = (fields, { measures, dimensions }) => {
+    const { xField, yField } = this.infer(fields, { measures, dimensions });
+    return {
+      general: {
+        colorField: xField?.value,
+        angleField: yField?.value,
+      },
+    };
+  };
+}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/index.tsx b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/index.tsx
new file mode 100644
index 0000000000..751c03fd7e
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/index.tsx
@@ -0,0 +1,39 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Plugin } from '@nocobase/client';
+import { ECharts, Pie, Bar, Line } from './echarts';
+import DataVisualizationPlugin from '@nocobase/plugin-data-visualization/client';
+
+export class PluginAddCustomChartsClient extends Plugin {
+  async afterAdd() {}
+
+  async beforeLoad() {
+    const plugin = this.app.pm.get(DataVisualizationPlugin);
+    plugin.charts.addGroup('echarts', {
+      title: 'ECharts',
+      charts: [
+        new ECharts({
+          name: 'echarts',
+          title: 'ECharts',
+          series: { type: 'line' },
+        }),
+        new Pie(),
+        new Bar(),
+        new Line(),
+      ],
+    });
+  }
+
+  async load() {
+    console.log(this.app);
+  }
+}
+
+export default PluginAddCustomChartsClient;
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/client/locale.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/locale.ts
new file mode 100644
index 0000000000..84797b7d1b
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/client/locale.ts
@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+// @ts-ignore
+import pkg from './../../package.json';
+import { useApp } from '@nocobase/client';
+
+export function useT() {
+  const app = useApp();
+  return (str: string) => app.i18n.t(str, { ns: [pkg.name, 'client'] });
+}
+
+export function tStr(key: string) {
+  return `{{t(${JSON.stringify(key)}, { ns: ['${pkg.name}', 'client'], nsMode: 'fallback' })}}`;
+}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/index.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/index.ts
new file mode 100644
index 0000000000..be99a2ff1a
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/index.ts
@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './server';
+export { default } from './server';
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/locale/en-US.json b/packages/plugins/@gemel/plugin-add-custom-charts/src/locale/en-US.json
new file mode 100644
index 0000000000..0967ef424b
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/locale/en-US.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/locale/zh-CN.json b/packages/plugins/@gemel/plugin-add-custom-charts/src/locale/zh-CN.json
new file mode 100644
index 0000000000..0967ef424b
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/locale/zh-CN.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/server/collections/.gitkeep b/packages/plugins/@gemel/plugin-add-custom-charts/src/server/collections/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/server/index.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/server/index.ts
new file mode 100644
index 0000000000..be989de7c3
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/server/index.ts
@@ -0,0 +1,10 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export { default } from './plugin';
diff --git a/packages/plugins/@gemel/plugin-add-custom-charts/src/server/plugin.ts b/packages/plugins/@gemel/plugin-add-custom-charts/src/server/plugin.ts
new file mode 100644
index 0000000000..633be94d95
--- /dev/null
+++ b/packages/plugins/@gemel/plugin-add-custom-charts/src/server/plugin.ts
@@ -0,0 +1,28 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Plugin } from '@nocobase/server';
+
+export class PluginAddCustomChartsServer extends Plugin {
+  async afterAdd() {}
+
+  async beforeLoad() {}
+
+  async load() {}
+
+  async install() {}
+
+  async afterEnable() {}
+
+  async afterDisable() {}
+
+  async remove() {}
+}
+
+export default PluginAddCustomChartsServer;
diff --git a/yarn.lock b/yarn.lock
index 6678598595..66d2f77085 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14312,6 +14312,22 @@ ecdsa-sig-formatter@1.0.11:
   dependencies:
     safe-buffer "^5.0.1"
 
+echarts-for-react@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz#ac5859157048a1066d4553e34b328abb24f2b7c1"
+  integrity sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    size-sensor "^1.0.1"
+
+echarts@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
+  integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.6.0"
+
 editions@^2.2.0:
   version "2.3.1"
   resolved "https://registry.npmmirror.com/editions/-/editions-2.3.1.tgz#3bc9962f1978e801312fbd0aebfed63b49bfe698"
@@ -28098,6 +28114,11 @@ tslib@1.9.3:
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -29939,6 +29960,13 @@ zip-stream@^4.1.0:
     compress-commons "^4.1.2"
     readable-stream "^3.6.0"
 
+zrender@5.6.0:
+  version "5.6.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
+  integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
+  dependencies:
+    tslib "2.3.0"
+
 zustand@^4.4.1:
   version "4.4.7"
   resolved "https://registry.npmmirror.com/zustand/-/zustand-4.4.7.tgz#355406be6b11ab335f59a66d2cf9815e8f24038c"