style👗: 修改图表样式

src/components/charts/bar/index.tsx

@@ -37,33 +37,6 @@ export const Bar = (props: IProps) => {
                 subtext: subTitle ?? "",
                 left: 'center'
             },
-            xAxis: {
-                type: 'category',
-                data: data.map(item => {
-                    return dayjs(item.x).format("MM-DD")
-                }),
-            },
-            yAxis: {
-                type: "value"
-            },
-            series: [
-                {
-                    type: "bar",
-                    label: {
-                        show: true,
-                        position: "top",
-                        margin: 8
-                    }, 
-                    data: data.map(item => {
-                        return {
-                            value: item.y,
-                            itemStyle: {
-                                color: colors(item.y)
-                            }
-                        }
-                    }),
-                },
-            ],
             tooltip: {
                 show: true,
                 trigger: "item",
@@ -80,7 +53,34 @@ export const Bar = (props: IProps) => {
                 },
                 borderWidth: 0,
                 padding: 5
-            }
+            },
+            xAxis: {
+                type: 'category',
+                data: data.map(item => {
+                    return dayjs(item.x).format("MM-DD")
+                }),
+            },
+            yAxis: {
+                type: "value"
+            },
+            series: [
+                {
+                    type: "bar",
+                    label: {
+                        show: true,
+                        position: "top",
+                        margin: 8
+                    },
+                    data: data.map(item => {
+                        return {
+                            value: item.y,
+                            itemStyle: {
+                                color: colors(item.y)
+                            }
+                        }
+                    }),
+                },
+            ],
         };
     }, [data, title, subTitle])
 

src/components/charts/config/index.ts

@@ -14,6 +14,8 @@ import {
     TitleComponentOption,
     TooltipComponent,
     TooltipComponentOption,
+    LegendComponent,
+    LegendComponentOption,
     GridComponent,
     GridComponentOption,
     // 数据集组件
@@ -34,6 +36,7 @@ export type ECOption = echarts.ComposeOption<
     | PieSeriesOption
     | TitleComponentOption
     | TooltipComponentOption
+    | LegendComponentOption
     | GridComponentOption
     | DatasetComponentOption>;
 
@@ -41,6 +44,7 @@ export type ECOption = echarts.ComposeOption<
 echarts.use([
     TitleComponent,
     TooltipComponent,
+    LegendComponent,
     GridComponent,
     DatasetComponent,
     TransformComponent,

src/components/charts/pie/index.tsx

@@ -33,15 +33,15 @@ export default function Pie(props: IProps) {
             },
             tooltip: {
                 trigger: 'item',
-                formatter: '{a} <br/>{b} : {c} ({d}%)',
+                formatter: '{b} : ￥{c} ({d}%)',
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left'
             },
-            // legend: {
-            //     orient: 'vertical',
-            //     left: 'left',
-            // },
             series: [
                 {
-                    name: "金额",
+                    // name: "金额",
                     type: "pie",
                     radius: ['40%', '70%'],
                     // roseType: "radius",
@@ -49,17 +49,17 @@ export default function Pie(props: IProps) {
                         borderRadius: 10,
                         borderColor: '#fff',
                         borderWidth: 2,
-                        
+
                     },
                     label: {
-                        show: true,
+                        show: false,
                         // position: "top",
                         margin: 8,
                         formatter: "{b}: {c}"
                     },
                     emphasis: {
                         label: {
-                            show: true
+                            show: false,
                         }
                     },
                     data: data.map(item => {

src/pages/Home/Home.module.scss

@@ -9,4 +9,14 @@
     gap: 10px;
     align-items: flex-start;
   }
+
+  .monthBar {
+    height: 300px;
+  }
+
+  .cards {
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+  }
 }

src/pages/Home/Home.tsx

@@ -74,8 +74,17 @@ const Home = () => {
                     </Card>
                 </Space>
             </div>
-            <Bar data={transformer(billStore.groupByDate(billType))} />
-            <Pie data={transformer(billStore.groupByClass(billType))} />
+            <div className={styles.monthBar}>
+                <Bar data={transformer(billStore.groupByDate(billType))} />
+            </div>
+            <div className={styles.cards}>
+                <Card bodyStyle={{ height: 400, width: 400 }}>
+                    <Pie
+                        title="本月消费分类"
+                        data={transformer(billStore.groupByClass(billType))}
+                    />
+                </Card>
+            </div>
         </div>
     )
 }