feat(platform): add echarts route

Author: xiejay97

packages/platform/src/app/Routes.tsx

@@ -18,7 +18,7 @@ import AppLayout from './routes/layout/Layout';
 import AppLoginRoute from './routes/login/Login';
 
 const AppAMapRoute = React.lazy(() => import('./routes/dashboard/AMap'));
-const AppEChartsRoute = React.lazy(() => import('./routes/dashboard/ECharts'));
+const AppEChartsRoute = React.lazy(() => import('./routes/dashboard/echarts/ECharts'));
 
 const AppACLRoute = React.lazy(() => import('./routes/test/acl/ACL'));
 const AppHttpRoute = React.lazy(() => import('./routes/test/http/Http'));
@@ -105,19 +105,6 @@ export function AppRoutes() {
                   canActivate: [ACLGuard],
                 },
               },
-              {
-                path: 'amap/:ssssss',
-                element: (
-                  <React.Suspense fallback={<AppFCPLoader />}>
-                    <AppAMapRoute />
-                  </React.Suspense>
-                ),
-                data: {
-                  titleI18n: 'dashboard.amap',
-                  acl: ROUTES_ACL.dashboard.amap,
-                  canActivate: [ACLGuard],
-                },
-              },
               {
                 path: 'echarts',
                 element: (

packages/platform/src/app/components/chart/Chart.tsx

@@ -0,0 +1,65 @@
+import type { AppTheme } from '../../App';
+
+import * as echarts from 'echarts';
+import { cloneDeep, merge } from 'lodash';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+import { useResize, useStorage } from '@react-devui/hooks';
+import { getClassName } from '@react-devui/utils';
+
+import { STORAGE_KEY } from '../../../config/storage';
+import chartTheme from './theme.json';
+
+echarts.registerTheme('light', chartTheme.light);
+echarts.registerTheme('dark', merge(cloneDeep(chartTheme.light), chartTheme.dark));
+
+export interface AppChartProps<O extends echarts.EChartsOption> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  aOption: O | null;
+}
+
+function Chart<O extends echarts.EChartsOption>(props: AppChartProps<O>, ref: React.ForwardedRef<echarts.ECharts>): JSX.Element | null {
+  const {
+    aOption,
+
+    ...restProps
+  } = props;
+
+  //#region Ref
+  const elRef = useRef<HTMLDivElement>(null);
+  //#endregion
+
+  const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
+
+  const [instance, setInstance] = useState<echarts.ECharts | null>(null);
+  const containerRef = useCallback(
+    (el: HTMLElement | null) => {
+      setInstance((draft) => {
+        draft?.dispose();
+        return el ? echarts.init(el, themeStorage.value, { renderer: 'svg' }) : null;
+      });
+    },
+    [themeStorage.value]
+  );
+
+  useEffect(() => {
+    if (instance && aOption) {
+      instance.setOption(aOption);
+    }
+  });
+
+  useResize(elRef, () => {
+    if (instance) {
+      instance.resize();
+    }
+  });
+
+  useImperativeHandle<echarts.ECharts | null, echarts.ECharts | null>(ref, () => instance, [instance]);
+
+  return (
+    <div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-chart')}>
+      <div ref={containerRef} className="app-chart__container"></div>
+    </div>
+  );
+}
+
+export const AppChart = React.forwardRef(Chart);

packages/platform/src/app/components/chart/index.ts

@@ -0,0 +1 @@
+export * from './Chart';