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 (
-
-
-
-
- {(title, items) => {
- return ;
- }}
-
-
-
-
-
-
- );
-}
-
-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 (
-
-
- {props.title}
-
-
- {props.data.map((item, index) => (
-
-
-
- {name || item.name}
-
-
- {formatter(item.value)}
-
-
- ))}
-
-
- );
-}
-
-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 (
-
-
- {
- 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');
- }}
- />
-
- );
-}
-
-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 (
-
-
-
-
-
- {(title, items) => {
- return ;
- }}
-
-
-
-
- );
-}
-
-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 (
-
-
-
-
-
- {(title, items) => {
- return (
- b.value - a.value)}
- formatter={(value) => Number(value).toLocaleString()}
- />
- );
- }}
-
- `${Number(value) / 100} k` }}
- />
-
-
-
- );
-}
-
-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 (
-
-
-
-
- {(title, items) => {
- return ;
- }}
-
-
-
-
-
- );
-}
-
-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 (
-
-
-
-
-
-
-
- {(title, items) => {
- return (
- Number(value).toLocaleString()}
- />
- );
- }}
-
-
-
- );
-}
-
-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 (
-
-
-
-
- {(title, items) => {
- return ;
- }}
-
-
-
-
- );
-}
-
-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);
- }
- }
-}