fix🛠️: 日期排序bug & pie样式更改

src/App.css

@@ -1,6 +1,6 @@
 #root {
   height: 100%;
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   /* padding: 2rem; */
   /* text-align: center; */

src/components/charts/bar/index.tsx

@@ -1,10 +1,12 @@
 import {
     useRef,
     useMemo,
-    useEffect
+    useEffect,
+    useCallback
 } from 'react';
 import echarts, { ECOption } from '../config';
 import styles from "./indx.module.scss"
+import dayjs from "dayjs"
 
 type BarData = {
     x: string | number
@@ -21,6 +23,13 @@ export const Bar = (props: IProps) => {
     const { data, title, subTitle } = props;
     // 获取数据
     const chartRef = useRef<HTMLDivElement>(null);
+
+    const colors = useCallback((value: number) => {
+        if (value < 50) { return "#008000" }
+        else if (value < 100) { return "#FFA500" }
+        else { return "#8B0000" }
+    }, [])
+
     const option: ECOption = useMemo(() => {
         return {
             title: {
@@ -30,20 +39,29 @@ export const Bar = (props: IProps) => {
             },
             xAxis: {
                 type: 'category',
-                data: data.map(item => item.x),
+                data: data.map(item => {
+                    return dayjs(item.x).format("MM-DD")
+                }),
             },
             yAxis: {
                 type: "value"
             },
             series: [
                 {
-                    data: data.map(item => item.y),
+                    data: data.map(item => {
+                        return {
+                            value: item.y,
+                            itemStyle: {
+                                color: colors(item.y)
+                            }
+                        }
+                    }),
                     type: "bar",
                     label: {
                         show: true,
                         position: "top",
                         margin: 8
-                    }
+                    },
                 },
             ],
             tooltip: {

src/components/charts/pie/index.tsx

@@ -43,16 +43,13 @@ export default function Pie(props: IProps) {
                 {
                     // name: `${year}-${month}`,
                     type: "pie",
-                    data: data.map(item => {
-                        return {
-                            name: item.x,
-                            value: item.y
-                        }
-                    }),
-                    radius: [20, 100],
-                    roseType: "radius",
+                    radius: ['40%', '70%'],
+                    // roseType: "radius",
                     itemStyle: {
-                        borderRadius: 5
+                        borderRadius: 10,
+                        borderColor: '#fff',
+                        borderWidth: 2,
+                        
                     },
                     label: {
                         show: true,
@@ -65,6 +62,12 @@ export default function Pie(props: IProps) {
                             show: true
                         }
                     },
+                    data: data.map(item => {
+                        return {
+                            name: item.x,
+                            value: item.y
+                        }
+                    }),
                 },
             ],
         }

src/pages/Home/Home.tsx

@@ -9,18 +9,27 @@ import Pie from "../../components/charts/pie";
 import { Card, DatePicker, Radio, Space } from "antd";
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import dayjs from 'dayjs'
 
 const Home = () => {
     const billStore = useContext(BillContext)
 
     const transformer = (record: Record<string, IBill[]>) => {
-        return R.map((key: string) => {
+        const funcs = R.compose(
+            R.sort((a: { x: string, y: number }, b) => {
+                const date1 = dayjs(a.x).toDate().getTime()
+                const date2 = dayjs(b.x).toDate().getTime()
+
+                return date1 - date2
+            }),
+            R.map((key: string) => {
                 const moneys = record[key].map(bill => bill.money)
                 return {
                     x: key,
                     y: Number(R.sum(moneys).toFixed(2)),
                 }
-        })(R.keys(record))
+            }))
+        return funcs(R.keys(record))
     }
 
     const now = new Date();

src/pages/Record/Record.tsx

@@ -1,6 +1,6 @@
 import {Button, DatePicker, Input, InputNumber, message, Radio, Select, Space, Table, Tag} from "antd";
 import {ArrowDownOutlined, CloudUploadOutlined, DeleteOutlined,} from "@ant-design/icons";
-import {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
+import {useContext, useEffect, useRef, useState} from "react";
 import {BillType, EmptyBill, IBill} from "../../model";
 import moment from "moment/moment";
 import {BillContext} from "../../store";