升级图表 (#335)

* feat(DashboardAnalysis): 升级 G2Plot 版本 * feat(DashboardMonitor): 升级G2Plot版本 * feat(DashboardWorkplace): 升级G2Plot版本 * prettier * fix typo Co-authored-by: chenshuai2144 <[email protected]>
ant-design · Sep 13, 2021 · 63a02c9 · 63a02c9
1 parent 4e5f500
commit 63a02c9
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 162 deletions.
diff --git a/DashboardAnalysis/package.json b/DashboardAnalysis/package.json
@@ -12,7 +12,7 @@
     "dev": "umi dev"
   },
   "dependencies": {
-    "@ant-design/charts": "^0.9.4",
+    "@ant-design/charts": "^1.2.11",
     "@ant-design/icons": "^4.0.0",
     "classnames": "^2.2.6",
     "moment": "^2.22.2",

diff --git a/DashboardAnalysis/src/components/IntroduceRow.tsx b/DashboardAnalysis/src/components/IntroduceRow.tsx
@@ -1,7 +1,6 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { TinyArea, TinyColumn, Progress } from '@ant-design/charts';
 import { Col, Row, Tooltip } from 'antd';
-
 import numeral from 'numeral';
 import { ChartCard, Field } from './Charts';
 import type { DataItem } from '../data.d';
@@ -18,7 +17,7 @@ const topColResponsiveProps = {
   style: { marginBottom: 24 },
 };
 
-const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: DataItem[] }) => (
+const IntroduceRow = ({ loading, visitData = [] }: { loading: boolean; visitData: DataItem[] }) => (
   <Row gutter={24}>
     <Col {...topColResponsiveProps}>
       <ChartCard
@@ -60,16 +59,20 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
         contentHeight={46}
       >
         <TinyArea
-          color="#975FE4"
-          xField="x"
           height={46}
-          forceFit
-          yField="y"
+          autoFit
           smooth
-          data={visitData}
+          areaStyle={{
+            fill: 'l(270) 0:rgb(151 95 228 / 10%) 0.5:rgb(151 95 228 / 60%) 1:rgb(151 95 228)',
+          }}
+          line={{
+            color: '#975FE4',
+          }}
+          data={visitData.map((item) => item.y)}
         />
       </ChartCard>
     </Col>
+
     <Col {...topColResponsiveProps}>
       <ChartCard
         bordered={false}
@@ -84,7 +87,7 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
         footer={<Field label="转化率" value="60%" />}
         contentHeight={46}
       >
-        <TinyColumn xField="x" height={46} forceFit yField="y" data={visitData} />
+        <TinyColumn height={46} autoFit data={visitData.map((item) => item.y)} />
       </ChartCard>
     </Col>
     <Col {...topColResponsiveProps}>
@@ -114,13 +117,15 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
       >
         <Progress
           height={46}
+          padding={[15, 0]}
           percent={0.78}
           color="#13C2C2"
-          forceFit
-          size={8}
-          marker={[
+          autoFit
+          annotations={[
             {
-              value: 0.8,
+              type: 'line',
+              start: ['80%', '0%'],
+              end: ['80%', '100%'],
               style: {
                 stroke: '#13C2C2',
               },

diff --git a/DashboardAnalysis/src/components/OfflineData.tsx b/DashboardAnalysis/src/components/OfflineData.tsx
@@ -1,7 +1,6 @@
 import { Card, Col, Row, Tabs } from 'antd';
 import { RingProgress, Line } from '@ant-design/charts';
 import type { OfflineDataType, DataItem } from '../data.d';
-
 import NumberInfo from './NumberInfo';
 import styles from '../style.less';
 
@@ -23,7 +22,17 @@ const CustomTab = ({
       />
     </Col>
     <Col span={12} style={{ paddingTop: 36 }}>
-      <RingProgress forceFit height={60} width={60} percent={data.cvr} />
+      <RingProgress
+        autoFit
+        height={60}
+        innerRadius={0.7}
+        width={60}
+        percent={data.cvr}
+        statistic={{
+          title: false,
+          content: false,
+        }}
+      />
     </Col>
   </Row>
 );
@@ -49,21 +58,24 @@ const OfflineData = ({
         <TabPane tab={<CustomTab data={shop} currentTabKey={activeKey} />} key={shop.name}>
           <div style={{ padding: '0 24px' }}>
             <Line
-              forceFit
+              autoFit
               height={400}
               data={offlineChartData}
-              responsive
               xField="date"
               yField="value"
               seriesField="type"
+              slider={{
+                start: 0.1,
+                end: 0.5,
+              }}
               interactions={[
                 {
                   type: 'slider',
                   cfg: {},
                 },
               ]}
               legend={{
-                position: 'top-center',
+                position: 'top',
               }}
             />
           </div>

diff --git a/DashboardAnalysis/src/components/ProportionSales.tsx b/DashboardAnalysis/src/components/ProportionSales.tsx
@@ -1,8 +1,8 @@
 import { Card, Radio, Typography } from 'antd';
 import numeral from 'numeral';
 import type { RadioChangeEvent } from 'antd/es/radio';
-import { Donut } from '@ant-design/charts';
-import type { DonutConfig } from '@ant-design/charts/es/donut';
+import type { PieConfig } from '@ant-design/charts';
+import { Pie } from '@ant-design/charts';
 import React from 'react';
 import type { DataItem } from '../data.d';
 import styles from '../style.less';
@@ -21,56 +21,58 @@ const ProportionSales = ({
   salesType: 'all' | 'online' | 'stores';
   salesPieData: DataItem[];
   handleChangeSalesType?: (e: RadioChangeEvent) => void;
-}) => (
-  <Card
-    loading={loading}
-    className={styles.salesCard}
-    bordered={false}
-    title="销售额类别占比"
-    style={{
-      height: '100%',
-    }}
-    extra={
-      <div className={styles.salesCardExtra}>
-        {dropdownGroup}
-        <div className={styles.salesTypeRadio}>
-          <Radio.Group value={salesType} onChange={handleChangeSalesType}>
-            <Radio.Button value="all">全部渠道</Radio.Button>
-            <Radio.Button value="online">线上</Radio.Button>
-            <Radio.Button value="stores">门店</Radio.Button>
-          </Radio.Group>
+}) => {
+  const pieConfig: PieConfig = {
+    autoFit: true,
+    height: 300,
+    data: salesPieData,
+    radius: 1,
+    innerRadius: 0.64,
+    angleField: 'y',
+    colorField: 'x',
+    legend: false,
+    label: {
+      type: 'spider',
+      formatter: (text, item) => {
+        // eslint-disable-next-line no-underscore-dangle
+        return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
+      },
+    },
+    statistic: {
+      title: {
+        content: '销售额',
+      },
+    },
+  };
+
+  return (
+    <Card
+      loading={loading}
+      className={styles.salesCard}
+      bordered={false}
+      title="销售额类别占比"
+      style={{
+        height: '100%',
+      }}
+      extra={
+        <div className={styles.salesCardExtra}>
+          {dropdownGroup}
+          <div className={styles.salesTypeRadio}>
+            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
+              <Radio.Button value="all">全部渠道</Radio.Button>
+              <Radio.Button value="online">线上</Radio.Button>
+              <Radio.Button value="stores">门店</Radio.Button>
+            </Radio.Group>
+          </div>
         </div>
+      }
+    >
+      <div>
+        <Text>销售额</Text>
+        <Pie {...pieConfig} />
       </div>
-    }
-  >
-    <div>
-      <Text>销售额</Text>
-      <Donut
-        forceFit
-        height={340}
-        radius={0.8}
-        angleField="y"
-        colorField="x"
-        data={salesPieData as any}
-        legend={{
-          visible: false,
-        }}
-        label={{
-          visible: true,
-          type: 'spider',
-          formatter: (text, item) => {
-            // eslint-disable-next-line no-underscore-dangle
-            return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
-          },
-        }}
-        statistic={
-          {
-            totalLabel: '销售额',
-          } as DonutConfig['statistic']
-        }
-      />
-    </div>
-  </Card>
-);
+    </Card>
+  );
+};
 
 export default ProportionSales;
diff --git a/DashboardAnalysis/src/components/SalesCard.tsx b/DashboardAnalysis/src/components/SalesCard.tsx
@@ -71,28 +71,15 @@ const SalesCard = ({
               <div className={styles.salesBar}>
                 <Column
                   height={300}
-                  forceFit
-                  data={salesData as any}
+                  autoFit
+                  data={salesData}
                   xField="x"
                   yField="y"
                   xAxis={{
-                    visible: true,
-                    title: {
-                      visible: false,
-                    },
+                    title: null,
                   }}
                   yAxis={{
-                    visible: true,
-                    title: {
-                      visible: false,
-                    },
-                  }}
-                  title={{
-                    visible: true,
-                    text: '销售趋势',
-                    style: {
-                      fontSize: 14,
-                    },
+                    title: null,
                   }}
                   meta={{
                     y: {
@@ -130,28 +117,15 @@ const SalesCard = ({
               <div className={styles.salesBar}>
                 <Column
                   height={300}
-                  forceFit
-                  data={salesData as any}
+                  autoFit
+                  data={salesData}
                   xField="x"
                   yField="y"
                   xAxis={{
-                    visible: true,
-                    title: {
-                      visible: false,
-                    },
+                    title: null,
                   }}
                   yAxis={{
-                    visible: true,
-                    title: {
-                      visible: false,
-                    },
-                  }}
-                  title={{
-                    visible: true,
-                    text: '访问量趋势',
-                    style: {
-                      fontSize: 14,
-                    },
+                    title: null,
                   }}
                   meta={{
                     y: {

diff --git a/DashboardAnalysis/src/components/TopSearch.tsx b/DashboardAnalysis/src/components/TopSearch.tsx
@@ -4,7 +4,6 @@ import { TinyArea } from '@ant-design/charts';
 import React from 'react';
 import numeral from 'numeral';
 import type { DataItem } from '../data.d';
-
 import NumberInfo from './NumberInfo';
 import Trend from './Trend';
 import styles from '../style.less';
@@ -43,14 +42,14 @@ const columns = [
 
 const TopSearch = ({
   loading,
-  visitData2,
-  searchData,
+  visitData2 = [],
+  searchData = [],
   dropdownGroup,
 }: {
   loading: boolean;
-  visitData2: DataItem[];
+  visitData2?: DataItem[];
+  searchData?: DataItem[];
   dropdownGroup: React.ReactNode;
-  searchData: DataItem[];
 }) => (
   <Card
     loading={loading}
@@ -77,7 +76,7 @@ const TopSearch = ({
           status="up"
           subTotal={17.1}
         />
-        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
+        <TinyArea height={45} autoFit smooth data={visitData2.map((item) => item.y)} />
       </Col>
       <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
         <NumberInfo
@@ -94,7 +93,7 @@ const TopSearch = ({
           subTotal={26.2}
           gap={8}
         />
-        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
+        <TinyArea height={45} autoFit smooth data={visitData2.map((item) => item.y)} />
       </Col>
     </Row>
     <Table<any>

diff --git a/DashboardAnalysis/src/index.tsx b/DashboardAnalysis/src/index.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { useRequest } from 'umi';
 import { Suspense, useState } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Col, Dropdown, Menu, Row } from 'antd';
@@ -11,8 +12,6 @@ import SalesCard from './components/SalesCard';
 import TopSearch from './components/TopSearch';
 import ProportionSales from './components/ProportionSales';
 import OfflineData from './components/OfflineData';
-import { useRequest } from 'umi';
-
 import { fakeChartData } from './service';
 import PageLoading from './components/PageLoading';
 import type { TimeType } from './components/SalesCard';
@@ -126,8 +125,8 @@ const PAGE_NAME_UPPER_CAMEL_CASE: FC<PAGE_NAME_UPPER_CAMEL_CASEProps> = () => {
             <Suspense fallback={null}>
               <TopSearch
                 loading={loading}
-                visitData2={data?.visitData2 || []}
-                searchData={data?.searchData || []}
+                visitData2={data?.visitData2}
+                searchData={data?.searchData}
                 dropdownGroup={dropdownGroup}
               />
             </Suspense>