From c7762490def77695bedf179ffc63e3e95d15e14d Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Wed, 1 Jun 2022 00:27:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E8=A1=A5=E5=85=85=E6=9B=B4?=
 =?UTF-8?q?=E5=A4=9A=E7=9A=84ECharts=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: \
---
 mock/model/route.ts                       | 164 +++----
 src/composables/echarts.ts                |  18 +-
 src/router/modules/charts.ts              |  43 --
 src/router/modules/plugin.ts              |  41 ++
 src/views/plugin/charts/echarts/index.vue | 529 ++++++++++++++++++++--
 5 files changed, 635 insertions(+), 160 deletions(-)
 delete mode 100644 src/router/modules/charts.ts

diff --git a/mock/model/route.ts b/mock/model/route.ts
index a2f57a060..bd911cf26 100644
--- a/mock/model/route.ts
+++ b/mock/model/route.ts
@@ -131,6 +131,47 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
       path: '/plugin',
       component: 'basic',
       children: [
+        {
+          name: 'plugin_charts',
+          path: '/plugin/charts',
+          component: 'multi',
+          children: [
+            {
+              name: 'plugin_charts_echarts',
+              path: '/plugin/charts/echarts',
+              component: 'self',
+              meta: {
+                title: 'ECharts',
+                requiresAuth: true,
+                icon: 'simple-icons:apacheecharts'
+              }
+            },
+            {
+              name: 'plugin_charts_d3',
+              path: '/plugin/charts/d3',
+              component: 'self',
+              meta: {
+                title: 'D3',
+                requiresAuth: true,
+                icon: 'simple-icons:d3dotjs'
+              }
+            },
+            {
+              name: 'plugin_charts_antv',
+              path: '/plugin/charts/antv',
+              component: 'self',
+              meta: {
+                title: 'AntV',
+                requiresAuth: true,
+                icon: 'ant-design:bar-chart-outlined'
+              }
+            }
+          ],
+          meta: {
+            title: '图表',
+            icon: 'material-symbols:bar-chart-rounded'
+          }
+        },
         {
           name: 'plugin_map',
           path: '/plugin/map',
@@ -221,47 +262,6 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
             requiresAuth: true,
             icon: 'ic:baseline-local-printshop'
           }
-        },
-        {
-          name: 'plugin_charts',
-          path: '/plugin/charts',
-          component: 'multi',
-          children: [
-            {
-              name: 'plugin_charts_echarts',
-              path: '/plugin/charts/echarts',
-              component: 'self',
-              meta: {
-                title: 'ECharts',
-                requiresAuth: true,
-                icon: 'simple-icons:apacheecharts'
-              }
-            },
-            {
-              name: 'plugin_charts_d3',
-              path: '/plugin/charts/d3',
-              component: 'self',
-              meta: {
-                title: 'D3',
-                requiresAuth: true,
-                icon: 'simple-icons:d3dotjs'
-              }
-            },
-            {
-              name: 'plugin_charts_antv',
-              path: '/plugin/charts/antv',
-              component: 'self',
-              meta: {
-                title: 'AntV',
-                requiresAuth: true,
-                icon: 'ant-design:bar-chart-outlined'
-              }
-            }
-          ],
-          meta: {
-            title: '图表',
-            icon: 'material-symbols:bar-chart-rounded'
-          }
         }
       ],
       meta: {
@@ -543,6 +543,47 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
       path: '/plugin',
       component: 'basic',
       children: [
+        {
+          name: 'plugin_charts',
+          path: '/plugin/charts',
+          component: 'multi',
+          children: [
+            {
+              name: 'plugin_charts_echarts',
+              path: '/plugin/charts/echarts',
+              component: 'self',
+              meta: {
+                title: 'ECharts',
+                requiresAuth: true,
+                icon: 'simple-icons:apacheecharts'
+              }
+            },
+            {
+              name: 'plugin_charts_d3',
+              path: '/plugin/charts/d3',
+              component: 'self',
+              meta: {
+                title: 'D3',
+                requiresAuth: true,
+                icon: 'simple-icons:d3dotjs'
+              }
+            },
+            {
+              name: 'plugin_charts_antv',
+              path: '/plugin/charts/antv',
+              component: 'self',
+              meta: {
+                title: 'AntV',
+                requiresAuth: true,
+                icon: 'ant-design:bar-chart-outlined'
+              }
+            }
+          ],
+          meta: {
+            title: '图表',
+            icon: 'material-symbols:bar-chart-rounded'
+          }
+        },
         {
           name: 'plugin_map',
           path: '/plugin/map',
@@ -633,47 +674,6 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
             requiresAuth: true,
             icon: 'ic:baseline-local-printshop'
           }
-        },
-        {
-          name: 'plugin_charts',
-          path: '/plugin/charts',
-          component: 'multi',
-          children: [
-            {
-              name: 'plugin_charts_echarts',
-              path: '/plugin/charts/echarts',
-              component: 'self',
-              meta: {
-                title: 'ECharts',
-                requiresAuth: true,
-                icon: 'simple-icons:apacheecharts'
-              }
-            },
-            {
-              name: 'plugin_charts_d3',
-              path: '/plugin/charts/d3',
-              component: 'self',
-              meta: {
-                title: 'D3',
-                requiresAuth: true,
-                icon: 'simple-icons:d3dotjs'
-              }
-            },
-            {
-              name: 'plugin_charts_antv',
-              path: '/plugin/charts/antv',
-              component: 'self',
-              meta: {
-                title: 'AntV',
-                requiresAuth: true,
-                icon: 'ant-design:bar-chart-outlined'
-              }
-            }
-          ],
-          meta: {
-            title: '图表',
-            icon: 'material-symbols:bar-chart-rounded'
-          }
         }
       ],
       meta: {
diff --git a/src/composables/echarts.ts b/src/composables/echarts.ts
index b8d31aa6f..57ff9ca30 100644
--- a/src/composables/echarts.ts
+++ b/src/composables/echarts.ts
@@ -1,8 +1,16 @@
 import { ref, watch, nextTick, onUnmounted } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import * as echarts from 'echarts/core';
-import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
-import type { BarSeriesOption, LineSeriesOption, PieSeriesOption, ScatterSeriesOption } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, ScatterChart, PictorialBarChart, RadarChart, GaugeChart } from 'echarts/charts';
+import type {
+  BarSeriesOption,
+  LineSeriesOption,
+  PieSeriesOption,
+  ScatterSeriesOption,
+  PictorialBarSeriesOption,
+  RadarSeriesOption,
+  GaugeSeriesOption
+} from 'echarts/charts';
 import {
   TitleComponent,
   LegendComponent,
@@ -30,6 +38,9 @@ export type ECOption = echarts.ComposeOption<
   | LineSeriesOption
   | PieSeriesOption
   | ScatterSeriesOption
+  | PictorialBarSeriesOption
+  | RadarSeriesOption
+  | GaugeSeriesOption
   | TitleComponentOption
   | LegendComponentOption
   | TooltipComponentOption
@@ -50,6 +61,9 @@ echarts.use([
   LineChart,
   PieChart,
   ScatterChart,
+  PictorialBarChart,
+  RadarChart,
+  GaugeChart,
   LabelLayout,
   UniversalTransition,
   CanvasRenderer
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
deleted file mode 100644
index 6f8736653..000000000
--- a/src/router/modules/charts.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-const charts: AuthRoute.Route = {
-  name: 'plugin_charts',
-  path: '/plugin/charts',
-  component: 'multi',
-  children: [
-    {
-      name: 'plugin_charts_echarts',
-      path: '/plugin/charts/echarts',
-      component: 'self',
-      meta: {
-        title: 'ECharts',
-        requiresAuth: true,
-        icon: 'simple-icons:apacheecharts'
-      }
-    },
-    {
-      name: 'plugin_charts_d3',
-      path: '/plugin/charts/d3',
-      component: 'self',
-      meta: {
-        title: 'D3',
-        requiresAuth: true,
-        icon: 'simple-icons:d3dotjs'
-      }
-    },
-    {
-      name: 'plugin_charts_antv',
-      path: '/plugin/charts/antv',
-      component: 'self',
-      meta: {
-        title: 'AntV',
-        requiresAuth: true,
-        icon: 'ant-design:bar-chart-outlined'
-      }
-    }
-  ],
-  meta: {
-    title: '图表',
-    icon: 'material-symbols:bar-chart-rounded'
-  }
-};
-
-export default charts;
diff --git a/src/router/modules/plugin.ts b/src/router/modules/plugin.ts
index 0419d6e05..8ce056454 100644
--- a/src/router/modules/plugin.ts
+++ b/src/router/modules/plugin.ts
@@ -3,6 +3,47 @@ const plugin: AuthRoute.Route = {
   path: '/plugin',
   component: 'basic',
   children: [
+    {
+      name: 'plugin_charts',
+      path: '/plugin/charts',
+      component: 'multi',
+      children: [
+        {
+          name: 'plugin_charts_echarts',
+          path: '/plugin/charts/echarts',
+          component: 'self',
+          meta: {
+            title: 'ECharts',
+            requiresAuth: true,
+            icon: 'simple-icons:apacheecharts'
+          }
+        },
+        {
+          name: 'plugin_charts_d3',
+          path: '/plugin/charts/d3',
+          component: 'self',
+          meta: {
+            title: 'D3',
+            requiresAuth: true,
+            icon: 'simple-icons:d3dotjs'
+          }
+        },
+        {
+          name: 'plugin_charts_antv',
+          path: '/plugin/charts/antv',
+          component: 'self',
+          meta: {
+            title: 'AntV',
+            requiresAuth: true,
+            icon: 'ant-design:bar-chart-outlined'
+          }
+        }
+      ],
+      meta: {
+        title: '图表',
+        icon: 'material-symbols:bar-chart-rounded'
+      }
+    },
     {
       name: 'plugin_map',
       path: '/plugin/map',
diff --git a/src/views/plugin/charts/echarts/index.vue b/src/views/plugin/charts/echarts/index.vue
index f7e908f4f..16ded37a4 100644
--- a/src/views/plugin/charts/echarts/index.vue
+++ b/src/views/plugin/charts/echarts/index.vue
@@ -10,13 +10,23 @@
       <div ref="barRef" class="h-400px"></div>
     </n-card>
     <n-card :bordered="false" class="rounded-16px shadow-sm">
-      <div ref="scatterRef" class="h-400px"></div>
+      <div ref="pictorialBarRef" class="h-600px"></div>
+    </n-card>
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="scatterRef" class="h-600px"></div>
+    </n-card>
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="radarRef" class="h-400px"></div>
+    </n-card>
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="gaugeRef" class="h-640px"></div>
     </n-card>
   </n-space>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onUnmounted } from 'vue';
+import { graphic } from 'echarts';
 import { useEcharts, type ECOption } from '@/composables';
 
 const pieOptions = ref<ECOption>({
@@ -268,6 +278,10 @@ const barOptions = ref<ECOption>({
       type: 'bar',
       color: '#8378ea',
       showBackground: true,
+      barGap: 100,
+      itemStyle: {
+        borderRadius: [40, 40, 0, 0]
+      },
       backgroundStyle: {
         color: 'rgba(180, 180, 180, 0.2)'
       }
@@ -276,44 +290,493 @@ const barOptions = ref<ECOption>({
 });
 const { domRef: barRef } = useEcharts(barOptions);
 
-const scatterOptions = ref<ECOption>({
-  tooltip: {},
-  xAxis: {},
-  yAxis: {},
+const pictorialBarOption = ref<ECOption>(getPictorialBarOption());
+const { domRef: pictorialBarRef } = useEcharts(pictorialBarOption);
+function getPictorialBarOption(): ECOption {
+  const category: string[] = [];
+  let dottedBase = +new Date();
+  const lineData: number[] = [];
+  const barData: number[] = [];
+
+  for (let i = 0; i < 20; i += 1) {
+    const date = new Date((dottedBase += 3600 * 24 * 1000));
+    category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'));
+    const b = Math.random() * 200;
+    const d = Math.random() * 200;
+    barData.push(b);
+    lineData.push(d + b);
+  }
+
+  const options: ECOption = {
+    backgroundColor: '#0f375f',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['line', 'bar'],
+      textStyle: {
+        color: '#ccc'
+      }
+    },
+    xAxis: {
+      data: category,
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      }
+    },
+    yAxis: {
+      splitLine: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      }
+    },
+    series: [
+      {
+        name: 'line',
+        type: 'line',
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 15,
+        data: lineData
+      },
+      {
+        name: 'bar',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          borderRadius: 5,
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#14c8d4' },
+            { offset: 1, color: '#43eec6' }
+          ])
+        },
+        data: barData
+      },
+      {
+        name: 'line',
+        type: 'bar',
+        barGap: '-100%',
+        barWidth: 10,
+        itemStyle: {
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(20,200,212,0.5)' },
+            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+            { offset: 1, color: 'rgba(20,200,212,0)' }
+          ])
+        },
+        z: -12,
+        data: lineData
+      },
+      {
+        name: 'dotted',
+        type: 'pictorialBar',
+        symbol: 'rect',
+        itemStyle: {
+          color: '#0f375f'
+        },
+        symbolRepeat: true,
+        symbolSize: [12, 4],
+        symbolMargin: 1,
+        z: -10,
+        data: lineData
+      }
+    ]
+  };
+
+  return options;
+}
+
+const scatterOptions = ref<ECOption>(getScatterOption());
+const { domRef: scatterRef } = useEcharts(scatterOptions);
+
+function getScatterOption() {
+  // prettier-ignore
+  const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
+
+  // prettier-ignore
+  const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+  // prettier-ignore
+  const data: [number, number, number][] = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
+
+  const title: echarts.TitleComponentOption[] = [];
+  const singleAxis: echarts.SingleAxisComponentOption[] = [];
+  const series: echarts.ScatterSeriesOption[] = [];
+
+  days.forEach((day, idx) => {
+    title.push({
+      textBaseline: 'middle',
+      top: `${((idx + 0.5) * 100) / 7}%`,
+      text: day
+    });
+    singleAxis.push({
+      left: 150,
+      type: 'category',
+      boundaryGap: false,
+      data: hours,
+      top: `${(idx * 100) / 7 + 5}%`,
+      height: `${100 / 7 - 10}%`,
+      axisLabel: {
+        interval: 2
+      }
+    });
+    series.push({
+      singleAxisIndex: idx,
+      coordinateSystem: 'singleAxis',
+      type: 'scatter',
+      data: [],
+      symbolSize(dataItem) {
+        return dataItem[1] * 4;
+      }
+    });
+  });
+
+  data.forEach(dataItem => {
+    (series as any)[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+  });
+
+  const option: ECOption = {
+    tooltip: {
+      position: 'top'
+    },
+    title,
+    singleAxis,
+    series: series as any
+  };
+
+  return option;
+}
+
+const radarOptions = ref<ECOption>({
+  title: {
+    text: 'Multiple Radar'
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    left: 'center',
+    data: ['A Software', 'A Phone', 'Another Phone', 'Precipitation', 'Evaporation']
+  },
+  radar: [
+    {
+      indicator: [
+        { text: 'Brand', max: 100 },
+        { text: 'Content', max: 100 },
+        { text: 'Usability', max: 100 },
+        { text: 'Function', max: 100 }
+      ],
+      center: ['25%', '40%'],
+      radius: 80
+    },
+    {
+      indicator: [
+        { text: 'Look', max: 100 },
+        { text: 'Photo', max: 100 },
+        { text: 'System', max: 100 },
+        { text: 'Performance', max: 100 },
+        { text: 'Screen', max: 100 }
+      ],
+      radius: 80,
+      center: ['50%', '60%']
+    },
+    {
+      indicator: (() => {
+        const res = [];
+        for (let i = 1; i <= 12; i += 1) {
+          res.push({ text: `${i}月`, max: 100 });
+        }
+        return res;
+      })(),
+      center: ['75%', '40%'],
+      radius: 80
+    }
+  ],
   series: [
     {
-      symbolSize: 20,
+      type: 'radar',
+      tooltip: {
+        trigger: 'item'
+      },
+      areaStyle: {},
       data: [
-        [10.0, 8.04],
-        [8.07, 6.95],
-        [13.0, 7.58],
-        [9.05, 8.81],
-        [11.0, 8.33],
-        [14.0, 7.66],
-        [13.4, 6.81],
-        [10.0, 6.33],
-        [14.0, 8.96],
-        [12.5, 6.82],
-        [9.15, 7.2],
-        [11.5, 7.2],
-        [3.03, 4.23],
-        [12.2, 7.83],
-        [2.02, 4.47],
-        [1.05, 3.33],
-        [4.05, 4.96],
-        [6.03, 7.24],
-        [12.0, 6.26],
-        [12.0, 8.84],
-        [7.08, 5.82],
-        [5.02, 5.68]
-      ],
-      color: '#fedb5c',
-      type: 'scatter'
+        {
+          value: [60, 73, 85, 40],
+          name: 'A Software'
+        }
+      ]
+    },
+    {
+      type: 'radar',
+      radarIndex: 1,
+      areaStyle: {},
+      data: [
+        {
+          value: [85, 90, 90, 95, 95],
+          name: 'A Phone'
+        },
+        {
+          value: [95, 80, 95, 90, 93],
+          name: 'Another Phone'
+        }
+      ]
+    },
+    {
+      type: 'radar',
+      radarIndex: 2,
+      areaStyle: {},
+      data: [
+        {
+          name: 'Precipitation',
+          value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3]
+        },
+        {
+          name: 'Evaporation',
+          value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
+        }
+      ]
     }
   ]
 });
+const { domRef: radarRef } = useEcharts(radarOptions);
 
-const { domRef: scatterRef } = useEcharts(scatterOptions);
+const gaugeOptions = ref<ECOption>({
+  series: [
+    {
+      name: 'hour',
+      type: 'gauge',
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 12,
+      splitNumber: 12,
+      clockwise: true,
+      axisLine: {
+        lineStyle: {
+          width: 15,
+          color: [[1, 'rgba(0,0,0,0.7)']],
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          shadowBlur: 15
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 3,
+          shadowOffsetX: 1,
+          shadowOffsetY: 2
+        }
+      },
+      axisLabel: {
+        fontSize: 50,
+        distance: 25,
+        formatter(value) {
+          if (value === 0) {
+            return '';
+          }
+          return `${value}`;
+        }
+      },
+      anchor: {
+        show: true,
+        icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
+        showAbove: false,
+        offsetCenter: [0, '-35%'],
+        size: 120,
+        keepAspect: true,
+        itemStyle: {
+          color: '#707177'
+        }
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 12,
+        length: '55%',
+        offsetCenter: [0, '8%'],
+        itemStyle: {
+          color: '#C0911F',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      detail: {
+        show: false
+      },
+      title: {
+        offsetCenter: [0, '30%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
+      name: 'minute',
+      type: 'gauge',
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 60,
+      clockwise: true,
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 8,
+        length: '70%',
+        offsetCenter: [0, '8%'],
+        itemStyle: {
+          color: '#C0911F',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      anchor: {
+        show: true,
+        size: 20,
+        showAbove: false,
+        itemStyle: {
+          borderWidth: 15,
+          borderColor: '#C0911F',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      detail: {
+        show: false
+      },
+      title: {
+        offsetCenter: ['0%', '-40%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
+      name: 'second',
+      type: 'gauge',
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 60,
+      animationEasingUpdate: 'bounceOut',
+      clockwise: true,
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 4,
+        length: '85%',
+        offsetCenter: [0, '8%'],
+        itemStyle: {
+          color: '#C0911F',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      anchor: {
+        show: true,
+        size: 15,
+        showAbove: true,
+        itemStyle: {
+          color: '#C0911F',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      detail: {
+        show: false
+      },
+      title: {
+        offsetCenter: ['0%', '-40%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    }
+  ]
+});
+
+let intervalId: NodeJS.Timer;
+const { domRef: gaugeRef } = useEcharts(gaugeOptions, chart => {
+  intervalId = setInterval(() => {
+    const date = new Date();
+    const second = date.getSeconds();
+    const minute = date.getMinutes() + second / 60;
+    const hour = (date.getHours() % 12) + minute / 60;
+
+    chart.setOption({
+      animationDurationUpdate: 300,
+      series: [
+        {
+          name: 'hour',
+          animation: hour !== 0,
+          data: [{ value: hour }]
+        },
+        {
+          name: 'minute',
+          animation: minute !== 0,
+          data: [{ value: minute }]
+        },
+        {
+          animation: second !== 0,
+          name: 'second',
+          data: [{ value: second }]
+        }
+      ]
+    });
+  }, 1000);
+});
+function clearClock() {
+  clearInterval(intervalId);
+}
+
+onUnmounted(() => {
+  clearClock();
+});
 </script>
 
 <style scoped></style>