修改首页echarts样式

src/pages/index/index.tsx

@@ -1,105 +1,188 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from './index.less';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts'; // 用于获取 echarts 实例
 import {
   getNoticeCount,
   getRegulationsCount,
   getCustomerQandaCount,
   getLinksCount,
 } from '@/servers/api';
-import { Row, Col, Card, Statistic, Space } from 'antd';
+import { Card, Row, Col } from 'antd';
+
 const IndexPage: React.FC = () => {
-  // 通知中心数量
+  const [noticeCount, setNoticeCount] = useState({ publishCount: 0, topCount: 0, totalCount: 0 });
-  const [noticeCount, setNoticeCount] = useState({
-    publishCount: 0,
-    topCount: 0,
-    totalCount: 0,
-  });
-  // 政策法规数量
   const [regulationsCount, setRegulationsCount] = useState({
     publishCount: 0,
     topCount: 0,
     totalCount: 0,
   });
-  // 用户提问数量
   const [customerQandaCount, setCustomerQandaCount] = useState({
     noticeCount: 0,
     resolvedCount: 0,
     totalCount: 0,
   });
-  // 友情链接数量
+  const [linksCount, setLinksCount] = useState({ publishCount: 0, totalCount: 0 });
-  const [linksCount, setLinksCount] = useState({
+
-    publishCount: 0,
+  // 创建 4 个图表的 ref
-    totalCount: 0,
+  const regChartRef = useRef<any>(null);
-  });
+  const noticeChartRef = useRef<any>(null);
+  const qaChartRef = useRef<any>(null);
+  const linkChartRef = useRef<any>(null);
+
+  const defaultColors = [
+    '#5470C6', '#73C0DE', '#3BA272',
+    '#FC8452', '#9A60B4', '#EA7CCC'
+  ];
 
   useEffect(() => {
-    // 政策法规数量
+    Promise.all([
-    getRegulationsCount().then((res) => {
+      getRegulationsCount(),
-      setRegulationsCount(res.data);
+      getNoticeCount(),
-    });
+      getCustomerQandaCount(),
-    // 通知中心数量
+      getLinksCount(),
-    getNoticeCount().then((res) => {
+    ]).then(([reg, notice, qa, link]) => {
-      setNoticeCount(res.data);
+      setRegulationsCount(reg.data);
-    });
+      setNoticeCount(notice.data);
-    // 用户提问数量
+      setCustomerQandaCount(qa.data);
-    getCustomerQandaCount().then((res) => {
+      setLinksCount(link.data);
-      setCustomerQandaCount(res.data);
+
-    });
+      // 强制 resize 所有图表
-    // 友情链接数量
+      setTimeout(() => {
-    getLinksCount().then((res) => {
+        [regChartRef, noticeChartRef, qaChartRef, linkChartRef].forEach((ref) => {
-      setLinksCount(res.data);
+          if (ref.current) {
+            ref.current.getEchartsInstance().resize();
+          }
+        });
+      }, 0);
     });
   }, []);
 
-  const valueStyleBySuccess = {
+  const getSingleChartOption = (title: string, labels: string[], values: number[]) => ({
-    color: '#3f8600',
+    title: {
-    fontSize: 40,
+      text: title,
-  };
+      left: 'center',
-  const valueStyleByError = {
+      textStyle: { fontSize: 16, fontWeight: 'bold' },
-    color: '#cf1322',
+    },
-    fontSize: 40,
+    tooltip: {
-  };
+      trigger: 'axis',
-  const valueStyleByWarning = {
+      axisPointer: { type: 'shadow' },
-    color: '#faad14',
+    },
-    fontSize: 40,
+    grid: {
-  };
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: 50,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLine: { lineStyle: { color: '#ccc' } },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { type: 'dashed' } },
+    },
+    series: [
+      {
+        type: 'bar',
+        barWidth: '30%',
+        data: values.map((val, idx) => ({
+          value: val,
+          itemStyle: {
+            color: defaultColors[idx % defaultColors.length],
+            borderRadius: [6, 6, 0, 0],
+          },
+        })),
+        label: {
+          show: true,
+          position: 'top',
+        },
+        emphasis: {
+          itemStyle: { opacity: 0.9 },
+        },
+      },
+    ],
+    animationDuration: 800,
+  });
 
   return (
     <div className="common-container">
       <Row gutter={30}>
         <Col span={12}>
           <Card title="政策法规数量" className={styles.card}>
-            <div className={styles.flex}>
+            <ReactECharts
-              <Statistic title="发布" valueStyle={valueStyleBySuccess} value={regulationsCount.publishCount} />
+              ref={regChartRef}
-              <Statistic title="置顶" valueStyle={valueStyleByWarning} value={regulationsCount.topCount} />
+              option={getSingleChartOption(
-              <Statistic title="总数" valueStyle={valueStyleByError} value={regulationsCount.totalCount} />
+                '政策法规',
-            </div>
+                ['发布', '置顶', '总数'],
+                [
+                  regulationsCount.publishCount,
+                  regulationsCount.topCount,
+                  regulationsCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
           </Card>
         </Col>
         <Col span={12}>
           <Card title="通知中心数量" className={styles.card}>
-            <div className={styles.flex}>
+            <ReactECharts
-              <Statistic title="发布" valueStyle={valueStyleBySuccess} value={noticeCount.publishCount} />
+              ref={noticeChartRef}
-              <Statistic title="置顶" valueStyle={valueStyleByWarning} value={noticeCount.topCount} />
+              option={getSingleChartOption(
-              <Statistic title="总数" valueStyle={valueStyleByError} value={noticeCount.totalCount} />
+                '通知中心',
-            </div>
+                ['发布', '置顶', '总数'],
+                [
+                  noticeCount.publishCount,
+                  noticeCount.topCount,
+                  noticeCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
           </Card>
         </Col>
         <Col span={12}>
           <Card title="用户提问数量" className={styles.card}>
-            <div className={styles.flex}>
+            <ReactECharts
-              <Statistic title="未解决" valueStyle={valueStyleByWarning} value={customerQandaCount.noticeCount} />
+              ref={qaChartRef}
-              <Statistic title="已解决" valueStyle={valueStyleBySuccess} value={customerQandaCount.resolvedCount} />
+              option={getSingleChartOption(
-              <Statistic title="总数" valueStyle={valueStyleByError} value={customerQandaCount.totalCount} />
+                '用户提问',
-            </div>
+                ['发布数', '已回答数', '总数'],
+                [
+                  customerQandaCount.noticeCount,
+                  customerQandaCount.resolvedCount,
+                  customerQandaCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
           </Card>
         </Col>
         <Col span={12}>
           <Card title="友情链接数量" className={styles.card}>
-            <div className={styles.flex}>
+            <ReactECharts
-              <Statistic title="发布" valueStyle={valueStyleBySuccess} value={linksCount.publishCount} />
+              ref={linkChartRef}
-              <Statistic title="总数" valueStyle={valueStyleByError} value={linksCount.totalCount} />
+              option={getSingleChartOption(
-            </div>
+                '友情链接',
+                ['发布', '总数'],
+                [
+                  linksCount.publishCount,
+                  linksCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
           </Card>
         </Col>
       </Row>