优化一些小问题

src/pages/dashboard/analysis/components/IntroduceRow.tsx

@@ -1,5 +1,5 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tiny } from '@ant-design/plots';
+import { Area, Column } from '@ant-design/plots';
 import { Col, Progress, Row, Tooltip } from 'antd';
 import numeral from 'numeral';
 import type { DataItem } from '../data.d';
@@ -65,18 +65,19 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
           footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
           contentHeight={46}
         >
-          <Tiny.Area
+          <Area
             xField="x"
             yField="y"
             shapeField="smooth"
             height={46}
+            axis={false}
             style={{
               fill: 'linear-gradient(-90deg, white 0%, #975FE4 100%)',
               fillOpacity: 0.6,
               width: '100%',
             }}
+            padding={[0, 0, 0, 0]}
             data={visitData}
-            line={{ style: { stroke: '#975FE4' } }}
           />
         </ChartCard>
       </Col>
@@ -94,9 +95,10 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
           footer={<Field label="转化率" value="60%" />}
           contentHeight={46}
         >
-          <Tiny.Column
+          <Column
             xField="x"
             yField="y"
+            axis={false}
             height={46}
             data={visitData}
             scale={{ x: { paddingInner: 0.4 } }}

src/pages/dashboard/analysis/components/TopSearch.tsx

@@ -1,5 +1,5 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tiny } from '@ant-design/plots';
+import { Area } from '@ant-design/plots';
 import { Card, Col, Row, Table, Tooltip } from 'antd';
 import numeral from 'numeral';
 import React from 'react';
@@ -44,7 +44,6 @@ const TopSearch = ({
           count: number;
         },
       ) => a.count - b.count,
-      className: styles.alignRight,
     },
     {
       title: '周涨幅',
@@ -112,14 +111,14 @@ const TopSearch = ({
             status="up"
             subTotal={17.1}
           />
-          <Tiny.Area
+          <Area
             xField="x"
             yField="y"
             shapeField="smooth"
             height={45}
+            axis={false}
             style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.4 }}
             data={visitData2}
-            line={{ style: { stroke: '#6294FA' } }}
           />
         </Col>
         <Col
@@ -147,14 +146,14 @@ const TopSearch = ({
             subTotal={26.2}
             gap={8}
           />
-          <Tiny.Area
+          <Area
             xField="x"
             yField="y"
             shapeField="smooth"
             height={45}
             style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.4 }}
             data={visitData2}
-            line={{ style: { stroke: '#6294FA' } }}
+            axis={false}
           />
         </Col>
       </Row>

src/pages/dashboard/monitor/components/ActiveChart/index.tsx

@@ -1,4 +1,4 @@
-import { Tiny } from '@ant-design/plots';
+import { Area } from '@ant-design/plots';
 import { Statistic } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import useStyles from './index.style';
@@ -48,13 +48,14 @@ const ActiveChart = () => {
           marginTop: 32,
         }}
       >
-        <Tiny.Area
+        <Area
+          padding={[0, 0, 0, 0]}
           xField="x"
+          axis={false}
           yField="y"
           height={84}
           style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.6 }}
           data={activeData}
-          line={{ style: { stroke: '#6294FA' } }}
         />
       </div>
       {activeData && (

src/pages/dashboard/monitor/index.tsx

@@ -1,30 +1,17 @@
-import { Gauge, Liquid, Tiny, WordCloud } from '@ant-design/plots';
+import { Gauge, Liquid, WordCloud } from '@ant-design/plots';
 import { GridContent } from '@ant-design/pro-components';
 import { useRequest } from '@umijs/max';
-import { Card, Col, Row, Statistic } from 'antd';
+import { Card, Col, Progress, Row, Statistic } from 'antd';
 import numeral from 'numeral';
 import type { FC } from 'react';
 import ActiveChart from './components/ActiveChart';
 import Map from './components/Map';
 import { queryTags } from './service';
 import useStyles from './style.style';
+
 const { Countdown } = Statistic;
 const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
 
-const getAnnotations = (value: number) => [
-  {
-    type: 'text',
-    style: {
-      text: `${value * 100}%`,
-      x: '50%',
-      y: '50%',
-      textAlign: 'center',
-      fontSize: 16,
-      fontStyle: 'bold',
-    },
-  },
-];
-
 const Monitor: FC = () => {
   const { styles } = useStyles();
   const { loading, data } = useRequest(queryTags);
@@ -95,12 +82,15 @@ const Monitor: FC = () => {
             >
               <Gauge
                 height={180}
-                data={{
+                data={
+                  {
                     target: 80,
                     total: 100,
                     name: 'score',
                     thresholds: [20, 40, 60, 80, 100],
-                }}
+                  } as any
+                }
+                padding={[0, 0, 0, 0]}
                 style={{
                   textContent: () => `优`,
                 }}
@@ -123,35 +113,20 @@ const Monitor: FC = () => {
               marginBottom: 24,
             }}
           >
-            <Card title="各品类占比" bordered={false} className={styles.pieCard}>
+            <Card title="各品类占比" bordered={false}>
               <Row
                 style={{
                   padding: '16px 0',
                 }}
               >
                 <Col span={8}>
-                  <Tiny.Ring
-                    height={128}
-                    percent={0.3}
-                    color={['#E8EEF4', '#5FABF4']}
-                    annotations={getAnnotations(0.3)}
-                  />
+                  <Progress type="dashboard" percent={75} />
                 </Col>
                 <Col span={8}>
-                  <Tiny.Ring
-                    height={128}
-                    percent={0.22}
-                    color={['#E8EEF4', '#5DDECF']}
-                    annotations={getAnnotations(0.22)}
-                  />
+                  <Progress type="dashboard" percent={48} />
                 </Col>
                 <Col span={8}>
-                  <Tiny.Ring
-                    height={128}
-                    percent={0.32}
-                    color={['#E8EEF4', '#2FC25B']}
-                    annotations={getAnnotations(0.32)}
-                  />
+                  <Progress type="dashboard" percent={33} />
                 </Col>
               </Row>
             </Card>