fix(compiler): 首页新增饼状图统计

src/pages/Welcome.less

@@ -66,13 +66,13 @@
   .itemRight {
     display: flex;
     flex-wrap: wrap;
+    width: 100%;
     height: 100%;
     .imgRightBox {
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
-      width: 48%;
-      height: 47%;
+      width: 45%;
       margin: 10px;
       padding: 25px;
       border-radius: 30px;

src/pages/Welcome.tsx

@@ -1,6 +1,6 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { Button, Card, Col, DatePicker, Form, Row, Space } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './Welcome.less';
 import { getStatisticData } from '@/services/statistic';
 import bookSum from '../../public/assets/book-sum.png';
@@ -11,6 +11,7 @@ import online1 from '../../public/icons/online_1.png';
 import online2 from '../../public/icons/online_2.png';
 import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 import moment from 'moment/moment';
+import * as echarts from 'echarts';
 
 const { RangePicker } = DatePicker;
 
@@ -22,6 +23,7 @@ const Welcome: React.FC = () => {
   const [form] = Form.useForm();
   const [data, setData] = useState<any>(null);
   const [searchData, setSearchData] = useState<object | null>({});
+  const chartRef: any = useRef();
 
   // 获取数据
   const getList = () => {
@@ -31,6 +33,35 @@ const Welcome: React.FC = () => {
     getStatisticData(params).then((res) => {
       if (res && res.code === 0) {
         setData(res.data);
+        const chart = echarts.init(chartRef.current);
+        const region = JSON.parse(res.data.region);
+        const newData = Object.entries(region).map(([name, value]) => ({ value, name }));
+        console.log(newData);
+        const options = {
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              data: newData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        };
+        // 设置图表实例的配置项和数据
+        chart.setOption(options);
       }
     });
   };
@@ -84,7 +115,7 @@ const Welcome: React.FC = () => {
       </Card>
       <Card className={styles.container}>
         <Row gutter={[30, 20]}>
-          <Col span={5}>
+          <Col span={5} xs={24} sm={12} md={12} lg={12} xl={5} xxl={5}>
             <div className={styles.itemLeft}>
               <span className={styles.leftTitle}>总数</span>
               <div className={styles.imgBox}>
@@ -93,7 +124,7 @@ const Welcome: React.FC = () => {
               <span className={styles.leftNumber}>{data?.total}</span>
             </div>
           </Col>
-          <Col span={3}>
+          <Col span={3} xs={24} sm={12} md={12} lg={12} xl={3} xxl={3}>
             <div className={styles.itemCenter}>
               <div className={styles.itemImg}>
                 <img src={totalOnlineNum} alt="" />
@@ -102,7 +133,7 @@ const Welcome: React.FC = () => {
               <div className={styles.itemTitle}>总在线数</div>
             </div>
           </Col>
-          <Col span={12}>
+          <Col span={8} xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}>
             <div className={styles.itemRight}>
               <div className={[styles.imgRightBox, styles.itemRightBg4].join(' ')}>
                 <div className={styles.itemRightImg}>
@@ -134,6 +165,9 @@ const Welcome: React.FC = () => {
               </div>
             </div>
           </Col>
+          <Col span={8} xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}>
+            <div style={{ width: '700px', height: '450px' }} ref={chartRef} />
+          </Col>
         </Row>
       </Card>
     </PageContainer>