feature: 添加动态折线图

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>;

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>

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',

src/locales/zh-ch/modules/route.ts

@@ -6,6 +6,9 @@ const route = {
     countTo: '数字动画',
     form: '表单',
     seamlessScroll: '无限滚动',
+    echarts: '图表',
+    echarts_bar: '柱状图',
+    echarts_line: '折线图',
     userInfo: '用户管理',
     userList: '用户列表',
     userDateil: '用户详情',

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';

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,

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;

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>

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>

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>

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>

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'