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

@@ -3,7 +3,7 @@ import {
     useMemo,
     useEffect
 } from "react"
-import echarts, {ECOption} from '../config';
+import echarts, { ECOption } from '../config';
 import styles from "./index.module.scss"
 
 type PieData = {
@@ -20,7 +20,7 @@ interface IProps {
 
 export default function Pie(props: IProps) {
     // 获取数据
-    const {data, title, subTitle} = props
+    const { data, title, subTitle } = props
 
     const chartRef = useRef<HTMLDivElement>(null)
     // 设置图标配置
@@ -43,16 +43,13 @@ export default function Pie(props: IProps) {
                 {
                     // name: `${year}-${month}`,
                     type: "pie",
-                    data: data.map(item => {
+                    radius: ['40%', '70%'],
-                        return {
+                    // roseType: "radius",
-                            name: item.x,
-                            value: item.y
-                        }
-                    }),
-                    radius: [20, 100],
-                    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
+                        }
+                    }),
                 },
             ],
         }
@@ -72,7 +75,7 @@ export default function Pie(props: IProps) {
 
     // 挂载echarts
     const pie = useMemo(() => {
-        return chartRef.current ? echarts.init(chartRef.current, undefined, {renderer: "svg"}) : null
+        return chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null
     }, [chartRef.current])
     // 设置pie选项
     useEffect(() => {

src/pages/Home/Home.tsx

@@ -1,26 +1,35 @@
 import styles from "./Home.module.scss"
 import * as R from 'ramda'
-import {BillType, IBill} from "../../model"
+import { BillType, IBill } from "../../model"
 import Bar from "../../components/charts/bar"
-import {useContext, useEffect, useState} from "react";
+import { useContext, useEffect, useState } from "react";
-import {BillContext} from "../../store";
+import { BillContext } from "../../store";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
 import Pie from "../../components/charts/pie";
-import {Card, DatePicker, Radio, Space} from "antd";
+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();
@@ -38,8 +47,8 @@ const Home = () => {
     }
 
     const typeOpt = [
-        {label: '支出', value: BillType.consume},
+        { label: '支出', value: BillType.consume },
-        {label: '收入', value: BillType.income},
+        { label: '收入', value: BillType.income },
     ];
     const [billType, setBillType] = useState(BillType.consume)
 
@@ -65,8 +74,8 @@ const Home = () => {
                     </Card>
                 </Space>
             </div>
-            <Bar data={transformer(billStore.groupByDate(billType))}/>
+            <Bar data={transformer(billStore.groupByDate(billType))} />
-            <Pie data={transformer(billStore.groupByClass(billType))}/>
+            <Pie data={transformer(billStore.groupByClass(billType))} />
         </div>
     )
 }

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";