style: dashboard utilization

2024-07-10 10:00:55 +08:00
parent fe14edbb4e
commit 324561958e
16 changed files with 250 additions and 90 deletions
@@ -0,0 +1,63 @@
+import Chart from '@/components/echarts/chart';
+import {
+  gaugeItemConfig,
+  title as titleConfig
+} from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
+import { memo } from 'react';
+import { ChartProps } from './types';
+
+const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
+  props
+) => {
+  const { value, height, width, labelFormatter, title, color } = props;
+  if (!value && value !== 0) {
+    return <EmptyData height={height} title={title}></EmptyData>;
+  }
+
+  const setDataOptions = () => {
+    return {
+      title: {
+        ...titleConfig,
+        text: title,
+        top: '0',
+        left: 'center'
+      },
+      series: [
+        {
+          ...gaugeItemConfig,
+          axisLine: {
+            ...gaugeItemConfig.axisLine,
+            lineStyle: {
+              ...gaugeItemConfig.axisLine.lineStyle,
+              color: [
+                [value / 100, color],
+                [1, 'rgba(221, 221, 221, 0.5)']
+              ]
+            }
+          },
+          itemStyle: {
+            color: 'transparent'
+          },
+          detail: {
+            ...gaugeItemConfig.detail,
+            formatter: labelFormatter || gaugeItemConfig.detail.formatter
+          },
+          data: [{ value }]
+        }
+      ]
+    };
+  };
+
+  const dataOptions: any = setDataOptions();
+
+  return (
+    <Chart
+      height={height}
+      options={dataOptions}
+      width={width || '100%'}
+    ></Chart>
+  );
+};
+
+export default memo(GaugeChart);