diff --git a/src/App.css b/src/App.css index 2b31248..19a09d7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ #root { height: 100%; - max-width: 1280px; + /* max-width: 1280px; */ margin: 0 auto; /* padding: 2rem; */ /* text-align: center; */ diff --git a/src/components/charts/bar/index.tsx b/src/components/charts/bar/index.tsx index 315a7dc..35a242d 100644 --- a/src/components/charts/bar/index.tsx +++ b/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(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: { diff --git a/src/components/charts/pie/index.tsx b/src/components/charts/pie/index.tsx index 2186187..3ac0c9f 100644 --- a/src/components/charts/pie/index.tsx +++ b/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(null) // 设置图标配置 @@ -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 + } + }), }, ], } @@ -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(() => { diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 638d175..14cb764 100644 --- a/src/pages/Home/Home.tsx +++ b/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 {BillContext} from "../../store"; -import {observer} from "mobx-react-lite"; +import { useContext, useEffect, useState } from "react"; +import { BillContext } from "../../store"; +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) => { - return 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)) + 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)), + } + })) + return funcs(R.keys(record)) } const now = new Date(); @@ -38,8 +47,8 @@ const Home = () => { } const typeOpt = [ - {label: '支出', value: BillType.consume}, - {label: '收入', value: BillType.income}, + { label: '支出', value: BillType.consume }, + { label: '收入', value: BillType.income }, ]; const [billType, setBillType] = useState(BillType.consume) @@ -59,14 +68,14 @@ const Home = () => { value={billType} onChange={e => setBillType(e.target.value)} /> - + {"总金额"} ￥{billStore.getTotalMoney(billType)} - - + + ) } diff --git a/src/pages/Record/Record.tsx b/src/pages/Record/Record.tsx index 7d72c22..a969b72 100644 --- a/src/pages/Record/Record.tsx +++ b/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";