style👗: 修改图表样式

src/components/charts/bar/index.tsx

@@ -37,6 +37,23 @@ export const Bar = (props: IProps) => {
                 subtext: subTitle ?? "",
                 left: 'center'
             },
+            tooltip: {
+                show: true,
+                trigger: "item",
+                triggerOn: "mousemove|click",
+                axisPointer: {
+                    type: "line"
+                },
+                showContent: true,
+                alwaysShowContent: false,
+                showDelay: 0,
+                hideDelay: 100,
+                textStyle: {
+                    fontSize: 14
+                },
+                borderWidth: 0,
+                padding: 5
+            },
             xAxis: {
                 type: 'category',
                 data: data.map(item => {
@@ -64,23 +81,6 @@ export const Bar = (props: IProps) => {
                     }),
                 },
             ],
-            tooltip: {
-                show: true,
-                trigger: "item",
-                triggerOn: "mousemove|click",
-                axisPointer: {
-                    type: "line"
-                },
-                showContent: true,
-                alwaysShowContent: false,
-                showDelay: 0,
-                hideDelay: 100,
-                textStyle: {
-                    fontSize: 14
-                },
-                borderWidth: 0,
-                padding: 5
-            }
         };
     }, [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",
@@ -52,14 +52,14 @@ export default function Pie(props: IProps) {
 
                     },
                     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>
+            <div className={styles.monthBar}>
                 <Bar data={transformer(billStore.groupByDate(billType))} />
-            <Pie data={transformer(billStore.groupByClass(billType))} />
+            </div>
+            <div className={styles.cards}>
+                <Card bodyStyle={{ height: 400, width: 400 }}>
+                    <Pie
+                        title="本月消费分类"
+                        data={transformer(billStore.groupByClass(billType))}
+                    />
+                </Card>
+            </div>
         </div>
     )
 }