diff --git a/src/assets/icons/echarts.svg b/src/assets/icons/echarts.svg
new file mode 100644
index 00000000..efa65f45
--- /dev/null
+++ b/src/assets/icons/echarts.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642681353930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11275" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M895.49 853.45V299.52c0-23.53-19.08-42.61-42.61-42.61s-42.61 19.08-42.61 42.61v553.92h-85.22V469.96c0-23.53-19.08-42.61-42.61-42.61s-42.61 19.08-42.61 42.61v383.49h-85.22V384.74c0-23.53-19.07-42.61-42.61-42.61s-42.61 19.08-42.61 42.61v468.71h-85.22V555.18c0-23.53-19.07-42.61-42.61-42.61-23.53 0-42.61 19.08-42.61 42.61v298.27h-85.22v-426.1c0-23.53-19.08-42.61-42.61-42.61s-42.61 19.08-42.61 42.61v426.1c-23.53 0-42.61 19.08-42.61 42.61s19.08 42.61 42.61 42.61h766.97c23.53 0 42.61-19.08 42.61-42.61 0.01-23.54-19.07-42.61-42.6-42.61z"  p-id="11276"></path><path d="M145.56 247.2l165.75 124c3.41 3.41 7.24 5.97 11.51 8.1 1.7 0.43 3.41 1.28 5.11 2.13 1.7 0.42 3.41 0.85 5.55 1.28 2.55 0.43 5.53 0.85 8.09 0.85 3.41 0 6.39-0.43 9.37-1.28 2.99-0.43 5.97-1.7 8.95-2.98 0.43 0 0.43 0 0.85-0.42 2.56-1.28 5.55-2.98 7.67-5.12 2.55-2.13 5.11-4.69 7.24-7.24-1.71 2.13-3.41 3.84-5.54 5.97 0.43-0.43 1.28-0.85 1.7-1.28L520.52 222.5l141.89 70.73c6.39 3.41 13.21 5.11 20.02 5.11 4.26 0 8.95-0.85 13.21-2.13 2.56-0.85 4.68-2.13 7.24-3.41 1.71-0.85 3.41-1.71 5.11-2.98l170.44-127.83c18.75-14.06 22.59-40.91 8.53-59.65-14.06-18.75-40.9-22.58-59.65-8.52L677.75 205.87l-141.46-70.73-5.12-2.56c-6.39-2.98-12.78-4.69-19.17-4.69-3.41 0-6.81 0.43-10.23 1.7-0.85-0.43-1.28 0-1.71 0-3.83 0.85-7.24 2.56-10.23 4.26-2.98 1.7-5.54 3.83-8.09 6.39l-0.85 1.28L337.3 284.7 196.69 179.03c-18.75-14.06-45.59-10.23-59.65 8.52-14.07 18.75-10.23 45.59 8.52 59.65z"  p-id="11277"></path></svg>
\ No newline at end of file
diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts
index 9e034988..c795e215 100644
--- a/src/hooks/web/useECharts.ts
+++ b/src/hooks/web/useECharts.ts
@@ -4,6 +4,8 @@ import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
 import echarts from '@/utils/plugin/echarts';
 import { useEventListener } from '@/hooks/event/useEventListener';
 
+export type createEChartsOption = EChartsOption;
+
 export function useECharts(elRef: Ref<HTMLDivElement>) {
   let chartInstance: echarts.ECharts | null = null;
   const cacheOptions = ref({}) as Ref<EChartsOption>;
diff --git a/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue b/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue
index 1f516bea..9ff890a0 100644
--- a/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue
+++ b/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue
@@ -100,7 +100,6 @@
     if (isExternal(props.basePath)) {
       return props.basePath;
     }
-    console.log(`${props.basePath}     ${routePath}`);
     return `${props.basePath}${routePath ? '/' + routePath : routePath}`;
   };
 </script>
diff --git a/src/locales/en/modules/route.ts b/src/locales/en/modules/route.ts
index 169ca35f..f553d825 100644
--- a/src/locales/en/modules/route.ts
+++ b/src/locales/en/modules/route.ts
@@ -6,6 +6,9 @@ const route = {
     countTo: 'DigitalAnimation',
     form: 'Form',
     seamlessScroll: 'SeamlessScroll',
+    echarts: 'Echarts',
+    echarts_bar: 'Bar',
+    echarts_line: 'Line',
     userInfo: 'UserInfo',
     userList: 'UserList',
     userDateil: 'UserDateil',
diff --git a/src/locales/zh-ch/modules/route.ts b/src/locales/zh-ch/modules/route.ts
index 0a1ce34c..d829a909 100644
--- a/src/locales/zh-ch/modules/route.ts
+++ b/src/locales/zh-ch/modules/route.ts
@@ -6,6 +6,9 @@ const route = {
     countTo: '数字动画',
     form: '表单',
     seamlessScroll: '无限滚动',
+    echarts: '图表',
+    echarts_bar: '柱状图',
+    echarts_line: '折线图',
     userInfo: '用户管理',
     userList: '用户列表',
     userDateil: '用户详情',
diff --git a/src/main.ts b/src/main.ts
index f68976ec..8f074ed0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,6 @@ import App from './App.vue';
 // import 'virtual:windi-utilities.css'
 // Register icon sprite
 // import 'virtual:svg-icons-register'
-
 import { configMainGlobalProperties, getServerConfig } from './utils';
 import { configMainStore } from './store';
 import { configMainI18n } from './locales';
diff --git a/src/router/modules/otherRoute/otherRoute.ts b/src/router/modules/otherRoute/otherRoute.ts
index 791abeb6..02bcd651 100644
--- a/src/router/modules/otherRoute/otherRoute.ts
+++ b/src/router/modules/otherRoute/otherRoute.ts
@@ -58,6 +58,28 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: '/echarts',
+    component: Layout,
+    redirect: '/echarts/bar/',
+    name: 'echarts',
+    alwaysShow: true,
+    meta: { title: t('route.pathName.echarts'), icon: 'echarts' },
+    children: [
+      {
+        path: 'bar',
+        name: 'RtBar',
+        component: () => import('@/views/echarts/bar/index.vue'),
+        meta: { title: t('route.pathName.echarts_bar') },
+      },
+      {
+        path: 'line',
+        name: 'RtLine',
+        component: () => import('@/views/echarts/line/index.vue'),
+        meta: { title: t('route.pathName.echarts_line') },
+      },
+    ],
+  },
   {
     path: '/useradmin',
     component: Layout,
diff --git a/src/utils/plugin/echarts.ts b/src/utils/plugin/echarts.ts
index 43fad803..609b1d3d 100644
--- a/src/utils/plugin/echarts.ts
+++ b/src/utils/plugin/echarts.ts
@@ -6,7 +6,7 @@ import {
   ToolboxComponent,
   LegendComponent,
 } from 'echarts/components';
-import { LineChart } from 'echarts/charts';
+import { LineChart, BarChart } from 'echarts/charts';
 import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 
@@ -19,6 +19,7 @@ echarts.use([
   LegendComponent,
   CanvasRenderer,
   UniversalTransition,
+  BarChart,
 ]);
 
 export default echarts;
diff --git a/src/views/echarts/bar/components/BarRace.vue b/src/views/echarts/bar/components/BarRace.vue
new file mode 100644
index 00000000..b27a80f4
--- /dev/null
+++ b/src/views/echarts/bar/components/BarRace.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <h3>动态柱状图</h3>
+    <div ref="chartRef" class="chartRef"></div>
+  </div>
+</template>
+<script lang="ts"></script>
+<script lang="ts" setup>
+  import { onMounted, ref, Ref } from 'vue';
+  import { useECharts, createEChartsOption } from '@/hooks/web/useECharts';
+  import { useIntervalFn } from '@vueuse/core';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const data: number[] = [];
+  for (let i = 0; i < 5; ++i) {
+    data.push(Math.round(Math.random() * 200));
+  }
+
+  const options: createEChartsOption = {
+    xAxis: {
+      max: 'dataMax',
+    },
+    yAxis: {
+      type: 'category',
+      data: ['A', 'B', 'C', 'D', 'E'],
+      inverse: true,
+      animationDuration: 300,
+      animationDurationUpdate: 300,
+      max: 3, // only the largest 3 bars will be displayed
+    },
+    grid: {
+      left: '1%',
+      right: '10%',
+      top: '5%',
+      bottom: 0,
+      containLabel: true,
+    },
+    series: [
+      {
+        realtimeSort: true,
+        type: 'bar',
+        data: data,
+        label: {
+          show: true,
+          position: 'right',
+          valueAnimation: true,
+        },
+        itemStyle: {
+          color: '#409eff',
+        },
+      },
+    ],
+    legend: {
+      show: true,
+    },
+    animationDuration: 3000,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
+  };
+
+  onMounted(() => {
+    setOptions(options);
+    useIntervalFn(
+      () => {
+        run();
+      },
+      3000,
+      { immediate: true },
+    );
+  });
+
+  function run() {
+    for (var i = 0; i < data.length; ++i) {
+      if (Math.random() > 0.9) {
+        data[i] += Math.round(Math.random() * 2000);
+      } else {
+        data[i] += Math.round(Math.random() * 200);
+      }
+    }
+    setOptions(options, false);
+  }
+</script>
+
+<style scoped lang="scss">
+  .chartRef {
+    width: 100%;
+    height: 380px;
+  }
+</style>
diff --git a/src/views/echarts/bar/index.vue b/src/views/echarts/bar/index.vue
new file mode 100644
index 00000000..02b019fa
--- /dev/null
+++ b/src/views/echarts/bar/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="page-container">
+    <BarRace></BarRace>
+  </div>
+</template>
+<script lang="ts"></script>
+<script lang="ts" setup>
+  import BarRace from './components/BarRace.vue';
+</script>
+
+<style scoped lang="scss">
+  .page-container {
+    padding: 20px;
+    background-color: #{$main-bg-color};
+  }
+</style>
diff --git a/src/views/echarts/line/components/LineRace.vue b/src/views/echarts/line/components/LineRace.vue
new file mode 100644
index 00000000..001e9d23
--- /dev/null
+++ b/src/views/echarts/line/components/LineRace.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <h3>动态折线图</h3>
+    <div ref="chartRef" class="chartRef"></div>
+  </div>
+</template>
+<script lang="ts"></script>
+<script lang="ts" setup>
+  import { onMounted, ref, Ref } from 'vue';
+  import { useECharts, createEChartsOption } from '@/hooks/web/useECharts';
+  import { useIntervalFn } from '@vueuse/core';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const data: number[] = [];
+  for (let i = 0; i < 5; ++i) {
+    data.push(Math.round(Math.random() * 200));
+  }
+
+  const options: createEChartsOption = {
+    xAxis: {
+      max: 'dataMax',
+    },
+    yAxis: {
+      type: 'category',
+      data: ['A', 'B', 'C', 'D', 'E'],
+      inverse: true,
+      animationDuration: 300,
+      animationDurationUpdate: 300,
+      max: 3, // only the largest 3 bars will be displayed
+    },
+    grid: {
+      left: '1%',
+      right: '10%',
+      top: '5%',
+      bottom: 0,
+      containLabel: true,
+    },
+    series: [
+      {
+        realtimeSort: true,
+        type: 'bar',
+        data: data,
+        label: {
+          show: true,
+          position: 'right',
+          valueAnimation: true,
+        },
+        itemStyle: {
+          color: '#409eff',
+        },
+      },
+    ],
+    legend: {
+      show: true,
+    },
+    animationDuration: 3000,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
+  };
+
+  onMounted(() => {
+    setOptions(options);
+    useIntervalFn(
+      () => {
+        run();
+      },
+      3000,
+      { immediate: true },
+    );
+  });
+
+  function run() {
+    for (var i = 0; i < data.length; ++i) {
+      if (Math.random() > 0.9) {
+        data[i] += Math.round(Math.random() * 2000);
+      } else {
+        data[i] += Math.round(Math.random() * 200);
+      }
+    }
+    setOptions(options, false);
+  }
+</script>
+
+<style scoped lang="scss">
+  .chartRef {
+    width: 100%;
+    height: 380px;
+  }
+</style>
diff --git a/src/views/echarts/line/index.vue b/src/views/echarts/line/index.vue
new file mode 100644
index 00000000..14d47400
--- /dev/null
+++ b/src/views/echarts/line/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="page-container">
+    <LineRace></LineRace>
+  </div>
+</template>
+<script lang="ts"></script>
+<script lang="ts" setup>
+  import LineRace from './components/LineRace.vue';
+</script>
+
+<style scoped lang="scss">
+  .page-container {
+    padding: 20px;
+    background-color: #{$main-bg-color};
+  }
+</style>
diff --git a/src/views/useradmin/userlist/index.vue b/src/views/useradmin/userlist/index.vue
index 1204a87d..fe3ca9c2 100644
--- a/src/views/useradmin/userlist/index.vue
+++ b/src/views/useradmin/userlist/index.vue
@@ -2,7 +2,6 @@
   <div class="page-container">
     <span>听说这个是用户列表</span>
     <TsComponents />
-    <TsComponents2></TsComponents2>
     <!-- <el-icon><iEL-baseball /></el-icon>
 		<SvgIcon name="daosanjiao"></SvgIcon>
 		{{ t('login.title') }}
@@ -17,7 +16,6 @@
 
 <script setup lang="ts">
   import TsComponents from '@/components/tscomponents';
-  import TsComponents2 from '@/components/tscomponents2.vue';
 
   // import SvgIcon from '@/components/SvgIcon/index.vue'
   // import { getCurrentInstance } from 'vue'