fix(charts): big-number display broken in echarts (#24492)

Co-authored-by: aadhikari <aadhikari@apple.com>
2026-04-20 00:24:38 +00:00 · 2023-06-27 10:59:24 -07:00
parent 0ddc0a6738
commit 3f17945745
26 changed files with 250 additions and 111 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -24,8 +24,9 @@ import example1 from './images/BigNumber.jpg';
 import example2 from './images/BigNumber2.jpg';
 import thumbnail from './images/thumbnail.png';
 import { BigNumberTotalChartProps, BigNumberTotalFormData } from '../types';
+import { EchartsChartPlugin } from '../../types';

-const metadata = new ChartMetadata({
+const metadata = {
  category: t('KPI'),
  description: t(
    'Showcases a single metric front-and-center. Big number is best used to call attention to a KPI or the one thing you want your audience to focus on.',
@@ -46,9 +47,9 @@ const metadata = new ChartMetadata({
  ],
  thumbnail,
  behaviors: [Behavior.DRILL_TO_DETAIL],
-});
+};

-export default class BigNumberTotalChartPlugin extends ChartPlugin<
+export default class BigNumberTotalChartPlugin extends EchartsChartPlugin<
  BigNumberTotalFormData,
  BigNumberTotalChartProps
 > {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -26,8 +26,9 @@ import {
  BigNumberWithTrendlineChartProps,
  BigNumberWithTrendlineFormData,
 } from '../types';
+import { EchartsChartPlugin } from '../../types';

-const metadata = new ChartMetadata({
+const metadata = {
  category: t('KPI'),
  description: t(
    'Showcases a single number accompanied by a simple line chart, to call attention to an important metric along with its change over time or other dimension.',
@@ -45,9 +46,9 @@ const metadata = new ChartMetadata({
  ],
  thumbnail,
  behaviors: [Behavior.DRILL_TO_DETAIL],
-});
+};

-export default class BigNumberWithTrendlineChartPlugin extends ChartPlugin<
+export default class BigNumberWithTrendlineChartPlugin extends EchartsChartPlugin<
  BigNumberWithTrendlineFormData,
  BigNumberWithTrendlineChartProps
 > {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
@@ -16,15 +16,16 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import example from './images/BoxPlot.jpg';
 import thumbnail from './images/thumbnail.png';
 import { BoxPlotQueryFormData, EchartsBoxPlotChartProps } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
+export default class EchartsBoxPlotChartPlugin extends EchartsChartPlugin<
  BoxPlotQueryFormData,
  EchartsBoxPlotChartProps
 > {
@@ -43,7 +44,7 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsBoxPlot'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -58,7 +59,7 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
        name: t('Box Plot'),
        tags: [t('ECharts'), t('Range'), t('Statistical')],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
@@ -16,15 +16,16 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import example from './images/example.jpg';
 import { EchartsFunnelChartProps, EchartsFunnelFormData } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsFunnelChartPlugin extends ChartPlugin<
+export default class EchartsFunnelChartPlugin extends EchartsChartPlugin<
  EchartsFunnelFormData,
  EchartsFunnelChartProps
 > {
@@ -43,7 +44,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsFunnel'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -65,7 +66,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
          t('Trend'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
@@ -24,8 +24,9 @@ import example1 from './images/example1.jpg';
 import example2 from './images/example2.jpg';
 import buildQuery from './buildQuery';
 import { EchartsGaugeChartProps, EchartsGaugeFormData } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsGaugeChartPlugin extends ChartPlugin<
+export default class EchartsGaugeChartPlugin extends EchartsChartPlugin<
  EchartsGaugeFormData,
  EchartsGaugeChartProps
 > {
@@ -34,7 +35,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsGauge'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -55,7 +56,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
          t('Report'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
@@ -16,20 +16,21 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import example from './images/example.jpg';
 import buildQuery from './buildQuery';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsGraphChartPlugin extends ChartPlugin {
+export default class EchartsGraphChartPlugin extends EchartsChartPlugin {
  constructor() {
    super({
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsGraph'),
-      metadata: new ChartMetadata({
+      metadata: {
        category: t('Flow'),
        credits: ['https://echarts.apache.org'],
        description: t(
@@ -53,7 +54,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
          Behavior.DRILL_TO_DETAIL,
          Behavior.DRILL_BY,
        ],
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -33,8 +31,9 @@ import {
  EchartsMixedTimeseriesFormData,
  EchartsMixedTimeseriesProps,
 } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
  EchartsMixedTimeseriesFormData,
  EchartsMixedTimeseriesProps
 > {
@@ -53,7 +52,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsMixedTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -88,7 +87,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
          t('Transformable'),
        ],
        queryObjectCount: 2,
-      }),
+      },
      // @ts-ignore
      transformProps,
    });
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -26,8 +26,9 @@ import example2 from './images/Pie2.jpg';
 import example3 from './images/Pie3.jpg';
 import example4 from './images/Pie4.jpg';
 import { EchartsPieChartProps, EchartsPieFormData } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsPieChartPlugin extends ChartPlugin<
+export default class EchartsPieChartPlugin extends EchartsChartPlugin<
  EchartsPieFormData,
  EchartsPieChartProps
 > {
@@ -46,7 +47,7 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsPie'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -76,7 +77,7 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
          t('ECharts'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
@@ -17,7 +17,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -25,8 +25,9 @@ import thumbnail from './images/thumbnail.png';
 import example1 from './images/example1.jpg';
 import example2 from './images/example2.jpg';
 import { EchartsRadarChartProps, EchartsRadarFormData } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsRadarChartPlugin extends ChartPlugin<
+export default class EchartsRadarChartPlugin extends EchartsChartPlugin<
  EchartsRadarFormData,
  EchartsRadarChartProps
 > {
@@ -45,7 +46,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsRadar'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -68,7 +69,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
          t('ECharts'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
@@ -16,21 +16,22 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 import buildQuery from './buildQuery';
 import example1 from './images/Sunburst1.png';
 import example2 from './images/Sunburst2.png';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsSunburstChartPlugin extends ChartPlugin {
+export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
  constructor() {
    super({
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsSunburst'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -50,7 +51,7 @@ export default class EchartsSunburstChartPlugin extends ChartPlugin {
          t('Proportional'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
@@ -18,8 +18,6 @@
 */
 import {
  t,
-  ChartMetadata,
-  ChartPlugin,
  AnnotationType,
  Behavior,
  hasGenericChartAxes,
@@ -33,6 +31,7 @@ import {
  EchartsTimeseriesFormData,
 } from '../types';
 import example1 from './images/Area1.png';
+import { EchartsChartPlugin } from '../../types';

 const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
  transformProps({
@@ -40,7 +39,7 @@ const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
    formData: { ...chartProps.formData, area: true },
  });

-export default class EchartsAreaChartPlugin extends ChartPlugin<
+export default class EchartsAreaChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -49,7 +48,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -86,7 +85,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
          t('Popular'),
        ],
        thumbnail,
-      }),
+      },
      transformProps: areaTransformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -29,6 +27,7 @@ import {
  EchartsTimeseriesFormData,
  EchartsTimeseriesSeriesType,
 } from '../../types';
+import { EchartsChartPlugin } from '../../../types';
 import buildQuery from '../../buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from '../../transformProps';
@@ -46,7 +45,7 @@ const barTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
    },
  });

-export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -55,7 +54,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -93,7 +92,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
          t('Popular'),
        ],
        thumbnail,
-      }),
+      },
      transformProps: barTransformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -35,6 +33,7 @@ import transformProps from '../../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Line1.png';
 import example2 from './images/Line2.png';
+import { EchartsChartPlugin } from '../../../types';

 const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
  transformProps({
@@ -45,7 +44,7 @@ const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
    },
  });

-export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -54,7 +53,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -88,7 +87,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
          t('Popular'),
        ],
        thumbnail,
-      }),
+      },
      transformProps: lineTransformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -34,6 +32,7 @@ import controlPanel from './controlPanel';
 import transformProps from '../../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Scatter1.png';
+import { EchartsChartPlugin } from '../../../types';

 const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
  transformProps({
@@ -44,7 +43,7 @@ const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
    },
  });

-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -53,7 +52,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -89,7 +88,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
          t('Popular'),
        ],
        thumbnail,
-      }),
+      },
      transformProps: scatterTransformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -34,6 +32,7 @@ import controlPanel from './controlPanel';
 import transformProps from '../../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/SmoothLine1.png';
+import { EchartsChartPlugin } from '../../../types';

 const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
  transformProps({
@@ -44,7 +43,7 @@ const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
    },
  });

-export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -53,7 +52,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -88,7 +87,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
          t('Transformable'),
        ],
        thumbnail,
-      }),
+      },
      transformProps: smoothTransformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -34,8 +32,9 @@ import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Step1.png';
 import example2 from './images/Step2.png';
+import { EchartsChartPlugin } from '../../types';

-export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -44,7 +43,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -79,7 +78,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
          t('Stacked'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
@@ -19,8 +19,6 @@
 import {
  AnnotationType,
  Behavior,
-  ChartMetadata,
-  ChartPlugin,
  hasGenericChartAxes,
  t,
 } from '@superset-ui/core';
@@ -33,8 +31,9 @@ import {
  EchartsTimeseriesFormData,
 } from './types';
 import example from './images/Time-series_Chart.jpg';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
  EchartsTimeseriesFormData,
  EchartsTimeseriesChartProps
 > {
@@ -43,7 +42,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -75,7 +74,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
          t('Transformable'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts
@@ -16,20 +16,21 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import example from './images/tree.png';
 import buildQuery from './buildQuery';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsTreeChartPlugin extends ChartPlugin {
+export default class EchartsTreeChartPlugin extends EchartsChartPlugin {
  constructor() {
    super({
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsTree'),
-      metadata: new ChartMetadata({
+      metadata: {
        category: t('Part of a Whole'),
        credits: ['https://echarts.apache.org'],
        description: t(
@@ -45,7 +46,7 @@ export default class EchartsTreeChartPlugin extends ChartPlugin {
          t('Structural'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
@@ -17,7 +17,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -25,8 +25,9 @@ import thumbnail from './images/thumbnail.png';
 import example1 from './images/treemap_v2_1.png';
 import example2 from './images/treemap_v2_2.jpg';
 import { EchartsTreemapChartProps, EchartsTreemapFormData } from './types';
+import { EchartsChartPlugin } from '../types';

-export default class EchartsTreemapChartPlugin extends ChartPlugin<
+export default class EchartsTreemapChartPlugin extends EchartsChartPlugin<
  EchartsTreemapFormData,
  EchartsTreemapChartProps
 > {
@@ -45,7 +46,7 @@ export default class EchartsTreemapChartPlugin extends ChartPlugin<
      buildQuery,
      controlPanel,
      loadChart: () => import('./EchartsTreemap'),
-      metadata: new ChartMetadata({
+      metadata: {
        behaviors: [
          Behavior.INTERACTIVE_CHART,
          Behavior.DRILL_TO_DETAIL,
@@ -68,7 +69,7 @@ export default class EchartsTreemapChartPlugin extends ChartPlugin<
          t('Proportional'),
        ],
        thumbnail,
-      }),
+      },
      transformProps,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
@@ -27,6 +27,9 @@ import {
  PlainObject,
  QueryFormColumn,
  SetDataMaskHook,
+  ChartPlugin,
+  SqlaFormData,
+  ChartMetadata,
 } from '@superset-ui/core';
 import { EChartsCoreOption, ECharts } from 'echarts';
 import { TooltipMarker } from 'echarts/types/src/util/format';
@@ -170,4 +173,20 @@ export interface TreePathInfo {
  value: number | number[];
 }

+export class EchartsChartPlugin<
+  T extends SqlaFormData = SqlaFormData,
+  P extends ChartProps = ChartProps,
+> extends ChartPlugin<T, P> {
+  constructor(props: any) {
+    const { metadata, ...restProps } = props;
+    super({
+      ...restProps,
+      metadata: new ChartMetadata({
+        parseMethod: 'json',
+        ...metadata,
+      }),
+    });
+  }
+}
+
 export * from './Timeseries/types';
--- a/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
@@ -23,15 +23,107 @@ import {
  EchartsGraphChartPlugin,
  EchartsFunnelChartPlugin,
  EchartsTreemapChartPlugin,
+  EchartsAreaChartPlugin,
+  EchartsTimeseriesBarChartPlugin,
+  EchartsTimeseriesLineChartPlugin,
+  EchartsTimeseriesScatterChartPlugin,
+  EchartsTimeseriesSmoothLineChartPlugin,
+  EchartsTimeseriesStepChartPlugin,
+  EchartsMixedTimeseriesChartPlugin,
+  EchartsGaugeChartPlugin,
+  EchartsRadarChartPlugin,
+  EchartsTreeChartPlugin,
+  BigNumberChartPlugin,
+  BigNumberTotalChartPlugin,
+  EchartsSunburstChartPlugin,
 } from '../src';

-describe('@superset-ui/plugin-chart-echarts', () => {
-  it('exists', () => {
-    expect(EchartsBoxPlotChartPlugin).toBeDefined();
-    expect(EchartsPieChartPlugin).toBeDefined();
-    expect(EchartsTimeseriesChartPlugin).toBeDefined();
-    expect(EchartsGraphChartPlugin).toBeDefined();
-    expect(EchartsFunnelChartPlugin).toBeDefined();
-    expect(EchartsTreemapChartPlugin).toBeDefined();
+import { EchartsChartPlugin } from '../src/types';
+
+test('@superset-ui/plugin-chart-echarts exists', () => {
+  expect(EchartsBoxPlotChartPlugin).toBeDefined();
+  expect(EchartsPieChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesChartPlugin).toBeDefined();
+  expect(EchartsGraphChartPlugin).toBeDefined();
+  expect(EchartsFunnelChartPlugin).toBeDefined();
+  expect(EchartsTreemapChartPlugin).toBeDefined();
+  expect(EchartsAreaChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesBarChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesLineChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesScatterChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesSmoothLineChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesStepChartPlugin).toBeDefined();
+  expect(EchartsMixedTimeseriesChartPlugin).toBeDefined();
+  expect(EchartsGaugeChartPlugin).toBeDefined();
+  expect(EchartsRadarChartPlugin).toBeDefined();
+  expect(EchartsTreeChartPlugin).toBeDefined();
+  expect(BigNumberChartPlugin).toBeDefined();
+  expect(BigNumberTotalChartPlugin).toBeDefined();
+  expect(EchartsSunburstChartPlugin).toBeDefined();
+});
+
+test('@superset-ui/plugin-chart-echarts-parsemethod-validation', () => {
+  const plugins: EchartsChartPlugin[] = [
+    new EchartsBoxPlotChartPlugin().configure({
+      key: 'box_plot',
+    }),
+    new EchartsPieChartPlugin().configure({
+      key: 'pie',
+    }),
+    new EchartsTimeseriesChartPlugin().configure({
+      key: 'echarts_timeseries',
+    }),
+    new EchartsGraphChartPlugin().configure({
+      key: 'graph_chart',
+    }),
+    new EchartsFunnelChartPlugin().configure({
+      key: 'funnel',
+    }),
+    new EchartsTreemapChartPlugin().configure({
+      key: 'treemap_v2',
+    }),
+    new EchartsAreaChartPlugin().configure({
+      key: 'echarts_area',
+    }),
+    new EchartsTimeseriesBarChartPlugin().configure({
+      key: 'echarts_timeseries_bar',
+    }),
+    new EchartsTimeseriesLineChartPlugin().configure({
+      key: 'echarts_timeseries_line',
+    }),
+    new EchartsTimeseriesScatterChartPlugin().configure({
+      key: 'echarts_timeseries_scatter',
+    }),
+    new EchartsTimeseriesSmoothLineChartPlugin().configure({
+      key: 'echarts_timeseries_smooth',
+    }),
+    new EchartsTimeseriesStepChartPlugin().configure({
+      key: 'echarts_timeseries_step',
+    }),
+    new EchartsMixedTimeseriesChartPlugin().configure({
+      key: 'mixed_timeseries',
+    }),
+    new EchartsGaugeChartPlugin().configure({
+      key: 'gauge_chart',
+    }),
+    new EchartsRadarChartPlugin().configure({
+      key: 'radar',
+    }),
+    new EchartsTreeChartPlugin().configure({
+      key: 'tree',
+    }),
+    new BigNumberChartPlugin().configure({
+      key: 'big_number',
+    }),
+    new BigNumberTotalChartPlugin().configure({
+      key: 'big_number_total',
+    }),
+    new EchartsSunburstChartPlugin().configure({
+      key: 'sunburst',
+    }),
+  ];
+
+  plugins.forEach(plugin => {
+    expect(plugin.metadata.parseMethod).toEqual('json');
  });
 });