feat: playground embedding

src/components/echarts/h-bar.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { ChartProps } from './types';
 
 const BarChart: React.FC<ChartProps> = (props) => {
@@ -22,12 +22,12 @@ const BarChart: React.FC<ChartProps> = (props) => {
     legendData,
     title
   } = props;
-  if (!seriesData.length) {
-    return <EmptyData height={height} title={title}></EmptyData>;
-  }
 
   const options = {
-    title: titleConfig,
+    title: {
+      ...titleConfig,
+      left: 'start'
+    },
     grid,
     tooltip: {
       ...tooltip
@@ -48,7 +48,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
     series: []
   };
 
-  const setDataOptions = () => {
+  const dataOptions = useMemo((): any => {
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -69,7 +69,6 @@ const BarChart: React.FC<ChartProps> = (props) => {
       animation: false,
       title: {
         ...options.title,
-        left: 'start',
         text: title
       },
       yAxis: {
@@ -103,16 +102,20 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  };
-
-  const dataOptions: any = setDataOptions();
+  }, [seriesData, xAxisData, title]);
 
   return (
-    <Chart
-      height={height}
-      options={dataOptions}
-      width={width || '100%'}
-    ></Chart>
+    <>
+      {!seriesData.length ? (
+        <EmptyData height={height} title={title}></EmptyData>
+      ) : (
+        <Chart
+          height={height}
+          options={dataOptions}
+          width={width || '100%'}
+        ></Chart>
+      )}
+    </>
   );
 };