提交echarts测试文件

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/ReEcharts/index.vue

@@ -6,7 +6,7 @@ import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
 interface Props {
 	width?: string;
 	height?: string;
-	option: EChartsOption;
+	option: Partial<EChartsOption>;
 }
 const props = withDefaults(defineProps<Props>(), {
 	width: '100%',
@@ -18,7 +18,7 @@ const myChartsRef = ref<HTMLDivElement>();
 let myChart: ECharts;
 // eslint-disable-next-line no-undef
 // let timer: string | number | NodeJS.Timeout | undefined;
-let timer: number | undefined;
+let timer: any;
 
 // 初始化echarts
 const initChart = (): void => {
@@ -47,7 +47,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', resizeChart);
 	clearTimeout(timer);
-	timer = 0;
+	timer = null;
 });
 
 watch(

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -6,14 +6,10 @@
     <div @click="networkRequest()">点击发起网络请求</div>
     <div class="abc fonsSize30">测试sass样式</div>
     <div class="text-pink-200">1111</div>
-    <div :style="{ width: '1230px', height: '350px' }">
-        <Echarts :option="option" />
-    </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from 'vue';
-import Echarts from '@/components/ReEcharts/index.vue';
-import { useRoute, useRouter } from 'vue-router'
+
+import { useRouter } from 'vue-router'
 import { useStore } from "../store/index";
 import { post } from '@/utils/request'
 
@@ -116,140 +112,6 @@ const defaultProps = {
     label: 'label',
 }
 
-const option = reactive({
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow',
-            label: {
-                show: true
-            }
-        }
-    },
-    grid: {
-        left: '4%',
-        top: '15%',
-        right: '4%',
-        bottom: '10%'
-    },
-    legend: {
-        data: ['昨日总人数', '今日实时人数'],
-        top: '4%',
-        color: '#1FC3CE',
-        fontSize: 14,
-        selected: { 昨日使用率: false } // 不需要显示的设置为false
-    },
-    xAxis: {
-        data: [
-            '会议室1',
-            '会议室2',
-            '会议室3',
-            '会议室4',
-            '会议室5',
-            '会议室6',
-            '会议室7',
-            '会议室8',
-            '会议室9'
-        ],
-        axisLine: {
-            show: true, //隐藏X轴轴线
-            lineStyle: {
-                color: '#eee',
-                width: 1
-            }
-        },
-        axisTick: {
-            show: true, //隐藏X轴刻度
-            alignWithLabel: true
-        },
-        axisLabel: {
-            show: true,
-            color: '#333', //X轴文字颜色
-            fontSize: 14
-        }
-    },
-    yAxis: [
-        {
-            type: 'value',
-            name: '人数',
-            nameTextStyle: {
-                color: '#333',
-                fontSize: 14
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    width: 1,
-                    color: '#eee'
-                }
-            },
-            axisTick: {
-                show: false
-            },
-            axisLine: {
-                show: false
-            },
-            axisLabel: {
-                show: true,
-                color: '#333',
-                fontSize: 14
-            }
-        }
-    ],
-    series: [
-        {
-            name: '昨日总人数',
-            type: 'bar',
-            barWidth: 18,
-            itemStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0, // 右
-                    y: 1, // 下
-                    x2: 0, // 左
-                    y2: 0, // 上
-                    colorStops: [
-                        {
-                            offset: 0,
-                            color: '#F89898' // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: '#F56C6C' // 100% 处的颜色
-                        }
-                    ]
-                }
-            },
-            data: [24, 45, 43, 35, 76, 154, 86, 42, 68]
-        },
-        {
-            name: '今日实时人数',
-            type: 'bar',
-            barWidth: 18,
-            itemStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0, // 右
-                    y: 1, // 下
-                    x2: 0, // 左
-                    y2: 0, // 上
-                    colorStops: [
-                        {
-                            offset: 0,
-                            color: '#52A7FF' // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: '#409EFF' // 100% 处的颜色
-                        }
-                    ]
-                }
-            },
-            data: [133, 23, 114, 67, 89, 35, 67, 96, 90]
-        }
-    ]
-});
-
 </script>
 
 <style lang="scss" scoped></style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/test/echarts.vue

@@ -0,0 +1,144 @@
+<template>
+  <div :style="{ width: '1230px', height: '350px' }">
+    <Echarts :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Echarts from '@/components/ReEcharts/index.vue';
+import { EChartsOption } from 'echarts';
+import { reactive } from 'vue';
+const option = reactive<Partial<EChartsOption>>({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+      label: {
+        show: true
+      }
+    }
+  },
+  grid: {
+    left: '4%',
+    top: '15%',
+    right: '4%',
+    bottom: '10%'
+  },
+  legend: {
+    data: ['昨日总人数', '今日实时人数'],
+    top: '4%',
+    selected: { 昨日使用率: false } // 不需要显示的设置为false
+  },
+  xAxis: {
+    data: [
+      '会议室1',
+      '会议室2',
+      '会议室3',
+      '会议室4',
+      '会议室5',
+      '会议室6',
+      '会议室7',
+      '会议室8',
+      '会议室9'
+    ],
+    axisLine: {
+      show: true, //隐藏X轴轴线
+      lineStyle: {
+        color: '#eee',
+        width: 1
+      }
+    },
+    axisTick: {
+      show: true, //隐藏X轴刻度
+      alignWithLabel: true
+    },
+    axisLabel: {
+      show: true,
+      color: '#f00', //X轴文字颜色
+      fontSize: 14
+    }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '人数',
+      nameTextStyle: {
+        color: '#333',
+        fontSize: 14
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#ccc'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+        fontSize: 14
+      }
+    }
+  ],
+  series: [
+    {
+      name: '昨日总人数',
+      type: 'bar',
+      barWidth: 18,
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0, // 右
+          y: 1, // 下
+          x2: 0, // 左
+          y2: 0, // 上
+          colorStops: [
+            {
+              offset: 0,
+              color: '#F89898' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#F56C6C' // 100% 处的颜色
+            }
+          ]
+        }
+      },
+      data: [24, 45, 43, 35, 76, 154, 86, 42, 68]
+    },
+    {
+      name: '今日实时人数',
+      type: 'bar',
+      barWidth: 18,
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0, // 右
+          y: 1, // 下
+          x2: 0, // 左
+          y2: 0, // 上
+          colorStops: [
+            {
+              offset: 0,
+              color: '#52A7FF' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#409EFF' // 100% 处的颜色
+            }
+          ]
+        }
+      },
+      data: [133, 23, 114, 67, 89, 35, 67, 96, 90]
+    }
+  ]
+});
+</script>
+
+<style lang="scss" scoped></style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/test/index.vue

@@ -7,14 +7,14 @@
     <div>{{ config[id].num }}</div>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { config } from "./config"
 const id = 2;
 </script>
+
 <style lang="scss" scoped>
 .myClass {
-  @apply w-1/6;
-  @apply bg-red-700;
-  @apply text-white
+  @apply w-1/6 bg-red-700 text-white hover:size-20;
 }
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/router/index.ts

@@ -19,6 +19,10 @@ export const routes = [
         name: "test",
         path: "/test",
         component: () => import("../pages/test/index.vue")
+    }, {
+        name: "testEcharts",
+        path: "/testEcharts",
+        component: () => import("../pages/test/echarts.vue")
     }
 ]
 const router = createRouter({