From 5c8a36e10f48c4359d9e470cf5236a699e11cc28 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 3 Sep 2025 15:21:24 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E7=A7=BB=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84chart=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Chart/area-polar.tsx           | 92 -------------------
 src/components/Chart/customer-tooltip.tsx     | 42 ---------
 src/components/Chart/fact-multi-pie.tsx       | 67 --------------
 src/components/Chart/horizontal-interval.tsx  | 76 ---------------
 src/components/Chart/multi-area-line.tsx      | 63 -------------
 src/components/Chart/multi-stack-interval.tsx | 44 ---------
 src/components/Chart/overview-area-line.tsx   | 83 -----------------
 src/components/Chart/period-legend-line.tsx   | 81 ----------------
 src/components/Chart/style/index.module.less  | 36 --------
 9 files changed, 584 deletions(-)
 delete mode 100644 src/components/Chart/area-polar.tsx
 delete mode 100644 src/components/Chart/customer-tooltip.tsx
 delete mode 100644 src/components/Chart/fact-multi-pie.tsx
 delete mode 100644 src/components/Chart/horizontal-interval.tsx
 delete mode 100644 src/components/Chart/multi-area-line.tsx
 delete mode 100644 src/components/Chart/multi-stack-interval.tsx
 delete mode 100644 src/components/Chart/overview-area-line.tsx
 delete mode 100644 src/components/Chart/period-legend-line.tsx
 delete mode 100644 src/components/Chart/style/index.module.less

diff --git a/src/components/Chart/area-polar.tsx b/src/components/Chart/area-polar.tsx
deleted file mode 100644
index 400521a..0000000
--- a/src/components/Chart/area-polar.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import {
-  Chart,
-  Line,
-  Axis,
-  Area,
-  Tooltip,
-  Coordinate,
-  Legend,
-} from 'bizcharts';
-import CustomTooltip from './customer-tooltip';
-import { Spin } from '@arco-design/web-react';
-import DataSet from '@antv/data-set';
-
-interface AreaPolarProps {
-  data: any[];
-  loading: boolean;
-  fields: string[];
-  height: number;
-}
-function AreaPolar(props: AreaPolarProps) {
-  const { data, loading, fields, height } = props;
-
-  const { DataView } = DataSet;
-  const dv = new DataView().source(data);
-  dv.transform({
-    type: 'fold',
-    fields: fields, // 展开字段集
-    key: 'category', // key字段
-    value: 'score', // value字段
-  });
-
-  return (
-    <Spin loading={loading} style={{ width: '100%' }}>
-      <Chart
-        height={height || 400}
-        padding={0}
-        data={dv.rows}
-        autoFit
-        scale={{
-          score: {
-            min: 0,
-            max: 80,
-          },
-        }}
-        interactions={['legend-highlight']}
-        className={'chart-wrapper'}
-      >
-        <Coordinate type="polar" radius={0.8} />
-        <Tooltip shared>
-          {(title, items) => {
-            return <CustomTooltip title={title} data={items} />;
-          }}
-        </Tooltip>
-        <Line
-          position="item*score"
-          size="2"
-          color={['category', ['#313CA9', '#21CCFF', '#249EFF']]}
-        />
-        <Area
-          position="item*score"
-          tooltip={false}
-          color={[
-            'category',
-            [
-              'rgba(49, 60, 169, 0.4)',
-              'rgba(33, 204, 255, 0.4)',
-              'rgba(36, 158, 255, 0.4)',
-            ],
-          ]}
-        />
-        <Axis name="score" label={false} />
-        <Legend
-          position="right"
-          marker={(_, index) => {
-            return {
-              symbol: 'circle',
-              style: {
-                r: 4,
-                lineWidth: 0,
-                fill: ['#313CA9', '#21CCFF', '#249EFF'][index],
-              },
-            };
-          }}
-          name="category"
-        />
-      </Chart>
-    </Spin>
-  );
-}
-
-export default AreaPolar;
diff --git a/src/components/Chart/customer-tooltip.tsx b/src/components/Chart/customer-tooltip.tsx
deleted file mode 100644
index b66e67e..0000000
--- a/src/components/Chart/customer-tooltip.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { Typography, Badge } from '@arco-design/web-react';
-import styles from './style/index.module.less';
-
-const { Text } = Typography;
-interface TooltipProps {
-  title: string;
-  data: {
-    name: string;
-    value: string;
-    color: string;
-  }[];
-  color?: string;
-  name?: string;
-  formatter?: (value: string) => React.ReactNode;
-}
-
-function CustomTooltip(props: TooltipProps) {
-  const { formatter = (value) => value, color, name } = props;
-  return (
-    <div className={styles['customer-tooltip']}>
-      <div className={styles['customer-tooltip-title']}>
-        <Text bold>{props.title}</Text>
-      </div>
-      <div>
-        {props.data.map((item, index) => (
-          <div className={styles['customer-tooltip-item']} key={index}>
-            <div>
-              <Badge color={color || item.color} />
-              {name || item.name}
-            </div>
-            <div>
-              <Text bold>{formatter(item.value)}</Text>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default CustomTooltip;
diff --git a/src/components/Chart/fact-multi-pie.tsx b/src/components/Chart/fact-multi-pie.tsx
deleted file mode 100644
index 40afe24..0000000
--- a/src/components/Chart/fact-multi-pie.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { Chart, Legend, Facet } from 'bizcharts';
-import useBizTheme from '@/utils/useChartTheme';
-
-interface FactMultiPieProps {
-  data: any[];
-  loading: boolean;
-  height: number;
-}
-function FactMultiPie(props: FactMultiPieProps) {
-  return (
-    <Chart
-      theme={useBizTheme()}
-      forceUpdate
-      autoFit
-      data={props.data}
-      height={props.height || 400}
-      padding={[0, 0, 10, 0]}
-    >
-      <Legend visible={true} />
-      <Facet
-        fields={['category']}
-        type="rect"
-        showTitle={false}
-        eachView={(view, facet) => {
-          const data = facet.data;
-          view.coordinate({
-            type: 'theta',
-            cfg: {
-              radius: 0.8,
-              innerRadius: 0.7,
-            },
-          });
-          view
-            .interval()
-            .adjust('stack')
-            .position('value')
-            .color('type', [
-              '#249eff',
-              '#846BCE',
-              '#21CCFF',
-              ' #86DF6C',
-              '#0E42D2',
-            ])
-            .label('value', {
-              content: (content) => {
-                return `${(content.value * 100).toFixed(2)} %`;
-              },
-            }),
-            view.annotation().text({
-              position: ['50%', '46%'],
-              content: data[0].category,
-              style: {
-                fontSize: 14,
-                fontWeight: 500,
-                textAlign: 'center',
-              },
-              offsetY: 10,
-            });
-          view.interaction('element-single-selected');
-        }}
-      />
-    </Chart>
-  );
-}
-
-export default FactMultiPie;
diff --git a/src/components/Chart/horizontal-interval.tsx b/src/components/Chart/horizontal-interval.tsx
deleted file mode 100644
index 67be668..0000000
--- a/src/components/Chart/horizontal-interval.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { Chart, Tooltip, Interval, Axis, Coordinate, G2 } from 'bizcharts';
-import { Spin } from '@arco-design/web-react';
-import CustomTooltip from './customer-tooltip';
-
-function HorizontalInterval({
-  data,
-  loading,
-  height,
-}: {
-  data: any[];
-  loading: boolean;
-  height?: number;
-}) {
-  G2.registerShape('interval', 'border-radius', {
-    draw(cfg, container) {
-      const points = cfg.points as unknown as { x: string; y: number };
-      let path = [];
-      path.push(['M', points[0].x, points[0].y]);
-      path.push(['L', points[1].x, points[1].y]);
-      path.push(['L', points[2].x, points[2].y]);
-      path.push(['L', points[3].x, points[3].y]);
-      path.push('Z');
-      path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
-
-      const group = container.addGroup();
-      const radius = (path[1][2] - path[2][2]) / 2;
-      group.addShape('rect', {
-        attrs: {
-          x: path[0][1], // 矩形起始点为左上角
-          y: path[0][2] - radius * 2,
-          width: path[1][1] - path[0][1],
-          height: path[1][2] - path[2][2],
-          fill: cfg.color,
-          radius: radius,
-        },
-      });
-      return group;
-    },
-  });
-
-  return (
-    <Spin loading={loading} style={{ width: '100%' }}>
-      <Chart
-        height={height || 370}
-        padding="auto"
-        data={data}
-        autoFit
-        className={'chart-wrapper'}
-      >
-        <Coordinate transpose />
-        <Interval
-          color="#4086FF"
-          position="name*count"
-          size={10}
-          shape="border-radius"
-        />
-        <Tooltip>
-          {(title, items) => {
-            return <CustomTooltip title={title} data={items} />;
-          }}
-        </Tooltip>
-        <Axis
-          name="count"
-          label={{
-            formatter(text) {
-              return `${Number(text) / 1000}k`;
-            },
-          }}
-        />
-      </Chart>
-    </Spin>
-  );
-}
-
-export default HorizontalInterval;
diff --git a/src/components/Chart/multi-area-line.tsx b/src/components/Chart/multi-area-line.tsx
deleted file mode 100644
index fe53b53..0000000
--- a/src/components/Chart/multi-area-line.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Chart, Line, Axis, Legend, Area, Tooltip } from 'bizcharts';
-import { Spin } from '@arco-design/web-react';
-import CustomTooltip from './customer-tooltip';
-
-const areaColorMap = [
-  'l (90) 0:rgba(131, 100, 255, 0.5) 1:rgba(80, 52, 255, 0.001)',
-  'l (90) 0:rgba(100, 255, 236, 0.5) 1:rgba(52, 255, 243, 0.001)',
-  'l (90) 0:rgba(255, 211, 100, 0.5) 1:rgba(255, 235, 52, 0.001)',
-  'l (90) 0:rgba(100, 162, 255, 0.5) 1:rgba(52, 105, 255, 0.001)',
-];
-
-const lineColorMap = ['#722ED1', '#33D1C9', '#F77234', '#165DFF'];
-
-function MultiAreaLine({ data, loading }: { data: any[]; loading: boolean }) {
-  return (
-    <Spin loading={loading} style={{ width: '100%' }}>
-      <Chart
-        height={352}
-        data={data}
-        padding={[10, 0, 30, 30]}
-        autoFit
-        scale={{ time: 'time' }}
-        className={'chart-wrapper'}
-      >
-        <Line
-          shape="smooth"
-          position="time*count"
-          color={['name', lineColorMap]}
-        />
-        <Area
-          position="time*count"
-          shape="smooth"
-          color={['name', areaColorMap]}
-          tooltip={false}
-        />
-        <Tooltip
-          crosshairs={{ type: 'x' }}
-          showCrosshairs
-          shared
-          showMarkers={true}
-        >
-          {(title, items) => {
-            return (
-              <CustomTooltip
-                title={title}
-                data={items.sort((a, b) => b.value - a.value)}
-                formatter={(value) => Number(value).toLocaleString()}
-              />
-            );
-          }}
-        </Tooltip>
-        <Axis
-          name="count"
-          label={{ formatter: (value) => `${Number(value) / 100} k` }}
-        />
-        <Legend visible={false} />
-      </Chart>
-    </Spin>
-  );
-}
-
-export default MultiAreaLine;
diff --git a/src/components/Chart/multi-stack-interval.tsx b/src/components/Chart/multi-stack-interval.tsx
deleted file mode 100644
index 93f279e..0000000
--- a/src/components/Chart/multi-stack-interval.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Chart, Tooltip, Interval, Axis, Legend } from 'bizcharts';
-import { Spin } from '@arco-design/web-react';
-import CustomTooltip from './customer-tooltip';
-
-function MultiInterval({ data, loading }: { data: any[]; loading: boolean }) {
-  return (
-    <Spin loading={loading} style={{ width: '100%' }}>
-      <Chart
-        height={370}
-        padding="auto"
-        data={data}
-        autoFit
-        className={'chart-wrapper'}
-      >
-        <Interval
-          adjust="stack"
-          color={['name', ['#81E2FF', '#00B2FF', '#246EFF']]}
-          position="time*count"
-          size={16}
-          style={{
-            radius: [2, 2, 0, 0],
-          }}
-        />
-        <Tooltip crosshairs={{ type: 'x' }} showCrosshairs shared>
-          {(title, items) => {
-            return <CustomTooltip title={title} data={items} />;
-          }}
-        </Tooltip>
-        <Axis
-          name="count"
-          label={{
-            formatter(text) {
-              return `${Number(text) / 1000}k`;
-            },
-          }}
-        />
-        <Legend name="name" marker={{ symbol: 'circle' }} />
-      </Chart>
-    </Spin>
-  );
-}
-
-export default MultiInterval;
diff --git a/src/components/Chart/overview-area-line.tsx b/src/components/Chart/overview-area-line.tsx
deleted file mode 100644
index 344c1c8..0000000
--- a/src/components/Chart/overview-area-line.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { Chart, Line, Axis, Area, Tooltip } from 'bizcharts';
-import { Spin } from '@arco-design/web-react';
-import CustomTooltip from './customer-tooltip';
-
-function OverviewAreaLine({
-  data,
-  loading,
-  name = '总内容量',
-  color = '#4080FF',
-}: {
-  data: any[];
-  loading: boolean;
-  name?: string;
-  color?: string;
-}) {
-  return (
-    <Spin loading={loading} style={{ width: '100%' }}>
-      <Chart
-        scale={{ value: { min: 0 } }}
-        padding={[10, 20, 50, 40]}
-        autoFit
-        height={300}
-        data={data}
-        className={'chart-wrapper'}
-      >
-        <Axis
-          name="count"
-          title
-          grid={{
-            line: {
-              style: {
-                lineDash: [4, 4],
-              },
-            },
-          }}
-          label={{
-            formatter(text) {
-              return `${Number(text) / 1000}k`;
-            },
-          }}
-        />
-        <Axis name="date" grid={{ line: { style: { stroke: '#E5E8EF' } } }} />
-        <Line
-          shape="smooth"
-          position="date*count"
-          size={3}
-          color="l (0) 0:#1EE7FF .57:#249AFF .85:#6F42FB"
-        />
-        <Area
-          position="date*count"
-          shape="smooth"
-          color="l (90) 0:rgba(17, 126, 255, 0.5)  1:rgba(17, 128, 255, 0)"
-        />
-        <Tooltip
-          showCrosshairs={true}
-          showMarkers={true}
-          marker={{
-            lineWidth: 3,
-            stroke: color,
-            fill: '#ffffff',
-            symbol: 'circle',
-            r: 8,
-          }}
-        >
-          {(title, items) => {
-            return (
-              <CustomTooltip
-                title={title}
-                data={items}
-                color={color}
-                name={name}
-                formatter={(value) => Number(value).toLocaleString()}
-              />
-            );
-          }}
-        </Tooltip>
-      </Chart>
-    </Spin>
-  );
-}
-
-export default OverviewAreaLine;
diff --git a/src/components/Chart/period-legend-line.tsx b/src/components/Chart/period-legend-line.tsx
deleted file mode 100644
index 0277e37..0000000
--- a/src/components/Chart/period-legend-line.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import { Chart, Line, Axis, Tooltip, Legend, Slider } from 'bizcharts';
-import { Spin } from '@arco-design/web-react';
-import CustomTooltip from './customer-tooltip';
-import useBizTheme from '@/utils/useChartTheme';
-
-const lineColor = ['#21CCFF', '#313CA9', '#249EFF'];
-function PeriodLine({ data, loading }: { data: any[]; loading: boolean }) {
-  return (
-    <Spin loading={loading} style={{ width: '100%' }}>
-      <Chart
-        theme={useBizTheme()}
-        forceUpdate
-        height={370}
-        padding={[10, 20, 120, 60]}
-        data={data}
-        autoFit
-        scale={{ time: 'time' }}
-        className={'chart-wrapper'}
-      >
-        <Line shape="smooth" position="time*rate" color={['name', lineColor]} />
-        <Tooltip crosshairs={{ type: 'x' }} showCrosshairs shared>
-          {(title, items) => {
-            return <CustomTooltip title={title} data={items} />;
-          }}
-        </Tooltip>
-        <Axis
-          name="rate"
-          label={{
-            formatter(text) {
-              return `${Number(text)} %`;
-            },
-          }}
-        />
-        <Legend
-          name="name"
-          marker={(_, index) => {
-            return {
-              symbol: 'circle',
-              style: {
-                fill: lineColor[index],
-                r: 4,
-              },
-            };
-          }}
-        />
-        <Slider
-          foregroundStyle={{
-            borderRadius: ' 4px',
-            fill: 'l (180) 0:rgba(206, 224, 255, 0.9) 1:rgba(146, 186, 255, 0.8)',
-            opacity: 0.3,
-          }}
-          trendCfg={{
-            data: data.map((item) => item.rate),
-            isArea: true,
-            areaStyle: {
-              fill: 'rgba(4, 135, 255, 0.15)',
-              opacity: 1,
-            },
-            backgroundStyle: {
-              fill: '#F2F3F5',
-            },
-            lineStyle: {
-              stroke: 'rgba(36, 158, 255, 0.3)',
-              lineWidth: 2,
-            },
-          }}
-          handlerStyle={{
-            fill: '#ffffff',
-            opacity: 1,
-            width: 22,
-            height: 22,
-            stroke: '#165DFF',
-          }}
-        />
-      </Chart>
-    </Spin>
-  );
-}
-
-export default PeriodLine;
diff --git a/src/components/Chart/style/index.module.less b/src/components/Chart/style/index.module.less
deleted file mode 100644
index f2ab0e3..0000000
--- a/src/components/Chart/style/index.module.less
+++ /dev/null
@@ -1,36 +0,0 @@
-.customer-tooltip {
-  &-title {
-    margin-bottom: 4px;
-  }
-
-  &-item {
-    height: 32px;
-    line-height: 32px;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 8px;
-    background: rgb(255 255 255 / 90%);
-    box-shadow: 6px 0 20px rgb(34 87 188 / 10%);
-    border-radius: 4px;
-    color: var(--color-text-2);
-
-    :global(.arco-badge-status-dot) {
-      width: 10px;
-      height: 10px;
-      margin-right: 8px;
-    }
-  }
-
-  &-item:not(:last-child) {
-    margin-bottom: 8px;
-  }
-}
-
-body[arco-theme='dark'] {
-  .customer-tooltip {
-    &-item {
-      background: #2a2a2b;
-      box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
-    }
-  }
-}