v2版本修改

src/pages/components/Header/Header.less

@@ -1,6 +1,6 @@
 .header{
     width: 100%;
-    height: 84px;
+    height: 102px;
     // background-color: rgb(228, 228, 236);
     display: flex;
     align-items: center;
@@ -19,31 +19,31 @@
         height: 84px;
         position: relative;
         .logo{
-            width: 116px;
-            height: 44px;
+            width: 140px;
+            height: 54px;
             margin-right: 30px;
             margin-top: 28px;
-            margin-left: 116px;
+            margin-left: 192px;
         }
         .title{
-            width: 618px;
-            height: 49px;
+            width: 746px;
+            height: 60px;
             margin-top: 34px;
         }
         &::after{
             content: '';
             width: 2px;
-            height: 52px;
+            height: 64px;
             position: absolute;
-            left: 255px;
-            top: 28px;
+            left: 354px;
+            top: 25px;
             background-color: #606060;
         }
     }
     .time{
         width: 25%;
         font-family: Source Han Sans CN;
-        font-size: 16px;
+        font-size: 20px;
         font-weight: 700;
         color: #606060;
         text-align: right;

src/pages/index.less

@@ -14,10 +14,10 @@
         justify-content: space-between;
     }
     .contLeft{
-        width: 584px;
+        width: 656px;
         // max-width: 494px;
         flex-shrink: 0;
-        padding: 75px 42px 0 48px;
+        padding: 90px 0 0 58px;
         box-sizing: border-box;
 
         display: flex;
@@ -29,27 +29,27 @@
         }
         .numTitle{
             color: #606060;
-            font-size: 20px;
+            font-size: 24px;
             margin-bottom: 10px;
         }
         .numTxt{
             color: #000000;
-            font-size: 32px;
+            font-size: 38px;
             font-weight: bold;
             text-wrap: nowrap;
             font-family: DIN;
         }
 
         .chartTitle{
-            height: 26px;
-            font-size: 17px;
+            height: 32px;
+            font-size: 21px;
             font-weight: 700;
             margin-left: 8px;
             border-bottom: 1px solid #BBC2CB;
             display: flex;
             align-items: center;
             position: relative;
-            margin-bottom: 12px;
+            margin-bottom: 16px;
             text-indent: 5px;
             text-wrap: nowrap;
             font-family: 'Source Han Sans CN';
@@ -59,8 +59,8 @@
                 left: -5px;
                 top: 50%;
                 width: 2px;
-                height: 18px;
-                margin-top: -9px;
+                height: 22px;
+                margin-top: -11px;
                 background-color: #1A5FE1;
             }
 
@@ -83,7 +83,7 @@
             }
         }
         .chartBox1{
-            width: calc(100% - 185px);
+            width: calc(100% - 211px);
             position: relative;
             &:hover{
                 .magnifier{
@@ -96,7 +96,7 @@
             .chartTarbar{
                 width: 100%;
                 // height: 24px;
-                font-size: 14px;
+                font-size: 18px;
                 font-family: Source Han Sans CN;
                 color: #606060;
                 display: flex;
@@ -121,7 +121,7 @@
 
         .videoBox{
             width: 100%;
-            height: 148px;
+            height: 178px;
             video{
                 width: 100%;
                 height: 100%;
@@ -137,7 +137,7 @@
         box-sizing: border-box;
         .cont1{
             width: 100%;
-            padding: 60px 74px 16px;
+            padding: 80px 74px 0;
             box-sizing: border-box;
             display: flex;
             align-items: center;
@@ -145,16 +145,16 @@
             z-index: 2;
             position: relative;
             .contLi{
-                width: 200px;
+                width: 250px;
                 div:first-child{
                     color: #000000;
-                    font-size: 20px;
+                    font-size: 24px;
                     font-family: Source Han Sans CN;
                     text-wrap: nowrap;
                 }
                 div:last-child{
                     color: #1A5FE1;
-                    font-size: 40px;
+                    font-size: 48px;
                     font-weight: bold;
                     font-family: DIN;
                     margin-top: 15px;
@@ -168,20 +168,24 @@
                 // }
             }
             .contLi+.contLi{
-                margin-left: 40px;
+                margin-left: 50px;
             }
         }
         .cont2{
             width: 100%;
-            height: 74vh;
+            height: 88vh;
             position: relative;
             z-index: 1;
             .contVideo{
                 position: absolute;
-                top: -62px;
-                left: -99px;
-                width: 1268px;
-                height: 850px;
+                // top: -62px;
+                // left: -99px;
+                // width: 1268px;
+                // height: 850px;
+                left: -80px;
+                top: -38px;
+                width: 1534px;
+                height: 1028px;
                 z-index: 1;
                 video{
                     width: 100%;
@@ -200,8 +204,8 @@
                 width: 36px;
                 height: 36px; 
                 position: absolute;
-                right: 0;
-                top: 0;
+                right: 50px;
+                top: 15px;
                 z-index: 3;
             }
             // background-color: rgb(241, 240, 245);
@@ -209,11 +213,11 @@
     }
 
     .contRight{
-        width: 584px;
+        width: 656px;
         // width: 25%;
         // max-width: 494px;
         flex-shrink: 0;
-        padding: 75px 48px 0 42px;
+        padding: 90px 58px 0 0;
         box-sizing: border-box;
         z-index: 999;
         display: flex;
@@ -224,20 +228,20 @@
         }
         .numTitle{
             color: #606060;
-            font-size: 20px;
+            font-size: 24px;
             margin-bottom: 10px;
         }
         .numTxt{
             color: #000000;
-            font-size: 32px;
+            font-size: 38px;
             font-weight: bold;
             text-wrap: nowrap;
             font-family: DIN;
         }
 
         .chartTitle{
-            height: 26px;
-            font-size: 17px;
+            height: 32px;
+            font-size: 21px;
             font-weight: 700;
             margin-left: 8px;
             border-bottom: 1px solid #BBC2CB;
@@ -254,8 +258,8 @@
                 left: -5px;
                 top: 50%;
                 width: 2px;
-                height: 18px;
-                margin-top: -9px;
+                height: 22px;
+                margin-top: -11px;
                 background-color: #1A5FE1;
             }
 
@@ -278,7 +282,7 @@
             }
         }
         .chartBox1{
-            width: calc(100% - 185px);
+            width: calc(100% - 224px);
             position: relative;
             overflow: hidden;
             &:hover{
@@ -290,7 +294,7 @@
                 content: '';
                 position: absolute;
                 left: 50%;
-                margin-left: -60px;
+                margin-left: -30px;
                 bottom: -60px;
                 width: 120px;
                 height: 120px;
@@ -303,10 +307,10 @@
                 content: '';
                 position: absolute;
                 left: 50%;
-                margin-left: -108px;
-                bottom: -108px;
-                width: 216px;
-                height: 216px;
+                margin-left: -100px;
+                bottom: -130px;
+                width: 260px;
+                height: 260px;
                 border-radius: 50%;
                 border: 1px solid #606060;
                 opacity: 0.2;
@@ -321,21 +325,21 @@
                 content: '';
                 position: absolute;
                 left: -20px;
-                top: 2px;
-                width: 10px;
-                height: 10px;
+                top: 5px;
+                width: 12px;
+                height: 12px;
                 background-color: #1A5FE1;
             }
             div:first-child{
-                font-size: 14px;
+                font-size: 18px;
                 color: #606060;
                 font-family: Source Han Sans CN;
                 margin-bottom: 5px;
             }
             div:last-child{
-                font-size: 28px;
+                font-size: 34px;
                 color: #000000;
-                font-weight: 500;
+                font-weight: 800;
                 font-family: DIN;
             }
             &:nth-child(1){
@@ -480,10 +484,10 @@
 .popCircular1{
     position: absolute;
     left: 50%;
-    margin-left: -191px;
-    bottom: -218px;
-    width: 430px;
-    height: 430px;
+    margin-left: -220px;
+    bottom: -247px;
+    width: 490px;
+    height: 490px;
     border-radius: 50%;
     border: 2px dashed #606060;
     opacity: 0.2;
@@ -493,10 +497,10 @@
 .popCircular2{
     position: absolute;
     left: 50%;
-    margin-left: -402px;
-    bottom: -420px;
-    width: 850px;
-    height: 850px;
+    margin-left: -475px;
+    bottom: -498px;
+    width: 1000px;
+    height: 1000px;
     border-radius: 50%;
     border: 2px solid #606060;
     opacity: 0.2;
@@ -511,16 +515,16 @@
             border-radius: 0;
         } 
         .ant-modal-title{
-            font-size: 52px;
-            padding-left: 100px;
+            font-size: 64px;
+            padding-left: 140px;
             padding-top: 50px;
             background-color: transparent;
         }
         .ant-modal-close{
-            width: 64px;
-            height: 64px;
+            width: 80px;
+            height: 80px;
             top: 80px;
-            inset-inline-end:70px;
+            inset-inline-end:130px;
             transition: all .2s;
             &:hover{
                 color: #1A5FE1;
@@ -528,7 +532,7 @@
             }
         }
         .ant-modal-close-x{
-            font-size: 56px;
+            font-size: 74px;
         }
     }
 }

src/pages/index.tsx

@@ -125,7 +125,7 @@ const Admin: React.FC = () => {
     useEffect(() => {
         getChartData()
         const interval = setInterval(()=>{
-            // getChartData()
+            getChartData()
             if(barIndexRef.current == 0){
                 setBarIndex(1)
             }else{
@@ -141,12 +141,6 @@ const Admin: React.FC = () => {
             setOptions(null)
             setTitle('')
             setChartIndex(0)
-        }else{
-            // setTimeout(()=>{
-                if(chartIndex != 10){
-                    // chartRef?.current?.resize();
-                }
-            // },300)
         }
     }, [isModalOpen])
 
@@ -257,7 +251,6 @@ const Admin: React.FC = () => {
             res.dataAbroad = filterList(res.dataAbroad).reverse()
             res.nameList = res.nameList.reverse()
             res.nameListAbroad = res.nameListAbroad.reverse()
-            console.log('res3',res)
             setChart3Data(res)
             setChartOptions3({
                 yAxis: {
@@ -347,11 +340,9 @@ const Admin: React.FC = () => {
         // chart9 用户画像
         try {
             const res = await getUserProfile();
-            console.log(res)
             res.data = filterList3(res.data)
             setChartRequestData9(res)
             const { data } = res;
-            console.log(res)
             let data2:any = [];
             let data3:any = [];
             data[0].data.forEach((item,index)=>{
@@ -460,13 +451,13 @@ const Admin: React.FC = () => {
           video.currentTime = 0;
           video.play();
         }
-      }, [videoRef]);
+    }, [videoRef]);
     return (
         <div className={styles.main}>
             <Header />
             <div className={styles.contLeft}>
                 <div className={`${styles.leftLi} ${styles.displayFlex}`}>
-                    <div style={{ width: '165px' }}>
+                    <div style={{ width: '200px' }}>
                         <div className={styles.numTitle}>当日销售额(万元)</div>
                         <div className={styles.numTxt}>{formatNumberWithCommas(numericalData2.todaySalesVolume)}</div>
                         <div className={styles.numTitle} style={{ marginTop: 30 }}>全年销售额(万元)</div>
@@ -474,14 +465,14 @@ const Admin: React.FC = () => {
                     </div>
                     <div className={styles.chartBox1} onClick={() => openChart(1)}>
                         <div className={styles.chartTitle}>销售额趋势</div>
-                        <ReactEcharts option={chartOptions1} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions1} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`} ><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
                 </div>
                 <div className={`${styles.leftLi} ${styles.displayFlex}`}>
                     <div className={styles.chartBox2} style={{ width: '155px' }} onClick={() => openChart(2)}>
                         <div className={styles.chartTitle}>国际销售额占比</div>
-                        <ReactEcharts option={chartOptions2} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions2} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`}><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
                     <div className={styles.chartBox1}>
@@ -491,15 +482,15 @@ const Admin: React.FC = () => {
                             <div className={`${styles.barLi} ${barIndex == 1 ? styles.barLis : ''}`} onClick={() => setBarIndex(1)}>国际</div>
                             <div className={`${styles.magnifier}`} onClick={() => openChart(3)}><img src={`${magnifierImg}`} alt="" /></div>
                         </div>
-                        <div style={{ height: '123px', width: '100%' }} onClick={() => openChart(3)}>
-                            <ReactEcharts option={chartOptions3} style={{ height: '123px', width: '100%' }} />
+                        <div style={{ height: '155px', width: '100%' }} onClick={() => openChart(3)}>
+                            <ReactEcharts option={chartOptions3} style={{ height: '155px', width: '100%' }} />
                         </div>
                     </div>
                 </div>
                 <div className={styles.leftLi}>
                     <div className={styles.chartBox2} onClick={() => openChart(4)}>
                         <div className={styles.chartTitle}>客单价趋势</div>
-                        <ReactEcharts option={chartOptions4} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions4} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`}><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
                 </div>
@@ -549,7 +540,7 @@ const Admin: React.FC = () => {
             </div>
             <div className={styles.contRight}>
                 <div className={`${styles.rightLi} ${styles.displayFlex}`}>
-                    <div style={{ width: '180px' }}>
+                    <div style={{ width: '200px' }}>
                         <div className={styles.numTitle}>当日订单数(张)</div>
                         <div className={styles.numTxt}>{formatNumberWithCommas(numericalData3.todayOrder)}</div>
                         <div className={styles.numTitle} style={{ marginTop: 30 }}>全年订单数(张)</div>
@@ -557,19 +548,19 @@ const Admin: React.FC = () => {
                     </div>
                     <div className={styles.chartBox1} onClick={() => openChart(5)}>
                         <div className={styles.chartTitle}>国内外订单对比</div>
-                        <ReactEcharts option={chartOptions5} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions5} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`}><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
                 </div>
                 <div className={`${styles.rightLi} ${styles.displayFlex}`}>
-                    <div className={styles.chartBox2} style={{ width: '49%' }} onClick={() => openChart(6)}>
+                    <div className={styles.chartBox2} style={{ width: '280px' }} onClick={() => openChart(6)}>
                         <div className={styles.chartTitle}>出发机场排名（国内）</div>
-                        <ReactEcharts option={chartOptions6} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions6} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`} ><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
-                    <div className={styles.chartBox2} style={{ width: '49%' }} onClick={() => openChart(7)}>
+                    <div className={styles.chartBox2} style={{ width: '280px' }} onClick={() => openChart(7)}>
                         <div className={styles.chartTitle}>出发机场排名（国际）</div>
-                        <ReactEcharts option={chartOptions7} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions7} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`} ><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
                 </div>
@@ -577,7 +568,7 @@ const Admin: React.FC = () => {
                     <div className={styles.chartBox2} onClick={() => openChart(8)}>
                         <div className={styles.chartTitle}>服务类型</div>
                         <div className={`${styles.displayFlex}`}>
-                            <ReactEcharts option={chartOptions8} style={{ height: '148px', width: '30%' }} />
+                            <ReactEcharts option={chartOptions8} style={{ height: '178px', width: '30%' }} />
                             <div style={{ width: '60%', display: 'flex', flexWrap: 'wrap' }}>
                                 {chart8Data && chart8Data.map((item, index) => {
                                     return (
@@ -595,7 +586,7 @@ const Admin: React.FC = () => {
                 <div className={styles.rightLi}>
                     <div className={styles.chartBox2} onClick={() => openChart(9)}>
                         <div className={styles.chartTitle}>用户画像</div>
-                        <ReactEcharts option={chartOptions9} style={{ height: '148px', width: '100%' }} />
+                        <ReactEcharts option={chartOptions9} style={{ height: '178px', width: '100%' }} />
                         <div className={`${styles.magnifier2}`} ><img src={`${magnifierImg}`} alt="" /></div>
                     </div>
                 </div>
@@ -608,7 +599,7 @@ const Admin: React.FC = () => {
                         <div className={`${styles.barLi} ${barIndex == 0 ? styles.barLis : ''}`} onClick={() => setBarIndex(0)}>国内</div>
                         <div className={`${styles.barLi} ${barIndex == 1 ? styles.barLis : ''}`} onClick={() => setBarIndex(1)}>国际</div>
                     </div>}
-                    {[1,2,3,4,5,6,7,8,9].includes(chartIndex) &&  <ReactEcharts ref={chartRef} option={options} style={{ height: [3,5].includes(chartIndex)?'65vh':'80vh', width: [8].includes(chartIndex)?'40vw':'100vw' }} />}
+                    {[1,2,3,4,5,6,7,8,9].includes(chartIndex) && <ReactEcharts ref={chartRef} option={options} style={{ height: [3,5].includes(chartIndex)?'65vh':'80vh', width: [8].includes(chartIndex)?'40vw':'100vw' }} />}
                     {chartIndex == 8 && <div style={{ width: '60%', display: 'flex', flexWrap: 'wrap',paddingLeft:80 ,paddingTop:'8%' }}>
                         {chart8Data && chart8Data.map((item, index) => {
                             return (
@@ -629,7 +620,6 @@ const Admin: React.FC = () => {
                     {chartIndex == 5 && <div className={styles.popCircular2}></div>}
                 </div>
             </Modal>
-
         </div>
     );
 };

src/services/chartOption.ts

@@ -15,7 +15,7 @@ const chartDefaultOptions1 = {
             rotate: -45,
             interval: 0,
             padding: [10, 0, 0, 0],
-            fontSize: 12,
+            fontSize: 14,
         },
         axisTick: {
             show: false
@@ -34,6 +34,9 @@ const chartDefaultOptions1 = {
             lineStyle: {
                 color: 'rgba(96,96,96,0.15)' // 设置x轴网格线颜色为红色  
             }
+        },
+        axisLabel:{
+            fontSize: 14,
         }
     },
     grid: {
@@ -73,8 +76,10 @@ const chartDefaultOptions1 = {
                 ),
                 width: 2 // 折线宽度  
             },
+            animation: true,
             animationDuration:allAnimationDuration,
-            animationEasing:allAnimationEasing
+            animationEasing:allAnimationEasing,
+            animationDurationUpdate:allAnimationDuration
         }
     ],
     animationEasing:allAnimationEasing
@@ -97,10 +102,10 @@ const chartDefaultOptions2 = {
     legend: {
         orient: 'horizontal', // 设置图例为水平方向  
         bottom: '2%',        // 设置图例离容器底部的距离为10%  
-        itemWidth: 10,
-        itemHeight: 10,
+        itemWidth: 12,
+        itemHeight: 12,
         textStyle: {
-            fontSize: 14
+            fontSize: 18,
         }
     },
     color: colors,
@@ -151,7 +156,7 @@ const chartDefaultOptions3 = {
     legend: { show: false },
     grid: {
         left: '0%',
-        right: '10%',
+        right: '5%',
         bottom: '3%',
         top: '5%',
         containLabel: true
@@ -188,7 +193,9 @@ const chartDefaultOptions3 = {
             }
         },
         axisLabel: {
-            color: '#606060'
+            color: '#606060',
+            fontSize:14
+            
         },
         nameTextStyle: {
             color: '#606060'
@@ -232,7 +239,8 @@ const chartDefaultOptions4 = {
         type: 'category',
         data: mouthData,
         axisLabel: {
-            interval: 0
+            interval: 0,
+            fontSize: 14,
         },
         axisTick: { show: false },
     },
@@ -243,9 +251,13 @@ const chartDefaultOptions4 = {
         nameTextStyle: {
             color: '#606060',
             align: 'right',
-            padding: [0, 8, 0, 0]
+            padding: [0, 8, 0, 0],
+            fontSize:14
         },
-        splitLine: { show: false }
+        splitLine: { show: false },
+        axisLabel:{
+            fontSize: 14,
+        }
 
     },
     legend: {
@@ -253,11 +265,14 @@ const chartDefaultOptions4 = {
         left: '2%',
         itemWidth: 10,
         itemHeight: 10,
+        textStyle: {
+            fontSize: 18,
+        }
         // 其他legend配置，如type、top、left、right、bottom、orient、textStyle等，根据需要设置  
     },
     grid: {
         left: '10%',
-        right: '8%',
+        right: '0',
         top: '33%',
         bottom: '20%',
     },
@@ -297,10 +312,13 @@ const chartDefaultOptions5 = {
         trigger: 'item'
     },
     legend: {
-        top: '5%',
-        left: 'center',
+        top: '1%',
+        left: '40%',
         itemWidth: 10,
         itemHeight: 10,
+        textStyle: {
+            fontSize: 18,
+        }
     },
     grid: {
         left: '0%',
@@ -311,7 +329,7 @@ const chartDefaultOptions5 = {
             name: '国内外订单对比',
             type: 'pie',
             radius: ['87%', '135%'],
-            center: ['50%', '100%'],
+            center: ['58%', '100%'],
             // adjust the start and end angle
             startAngle: 180,
             endAngle: 360,
@@ -387,7 +405,8 @@ const chartDefaultOptions6 = {
             }
         },
         axisLabel: {
-            color: '#606060'
+            color: '#606060',
+            fontSize: 14,
         },
         splitLine: {
             show: false // 隐藏网格线
@@ -469,6 +488,7 @@ const chartDefaultOptions7 = {
         },
         axisLabel: {
             color: '#606060',
+            fontSize: 14,
             formatter: function (value) {
               if (value.length > 5) {
                 return value.substring(0, 5) + '...';
@@ -513,7 +533,7 @@ const chartDefaultOptions8 = {
             // name: 'Access From',
             type: 'pie',
             radius: '85%',
-            center: ['50%', '50%'],
+            center: ['50%', '55%'],
             data: [].sort(function (a, b) {
                 return b.value - a.value;
             }),
@@ -531,13 +551,16 @@ const chartDefaultOptions8 = {
 }
 
 const chartDefaultOptions9 = {
-    color: colors.concat('#8AC0F6'),
+    color: colors.concat('#8AC0F6').reverse(),
     legend: {
         top: 0,
         left: '2%',
         itemWidth: 10,
         itemHeight: 10,
-        selectedMode: false
+        selectedMode: false,
+        textStyle: {
+            fontSize: 18,
+        }
     },
     yAxis: [{
         type: 'value',
@@ -545,7 +568,11 @@ const chartDefaultOptions9 = {
         nameTextStyle: {
             color: '#606060',
             align: 'right',
-            padding: [0, 8, 0, 0]
+            padding: [0, 8, 0, 0],
+            fontSize:14
+        },
+        axisLabel: {
+            fontSize: 14,
         },
     },{
         
@@ -560,6 +587,9 @@ const chartDefaultOptions9 = {
     xAxis: {
         type: 'category',
         data: mouthData,
+        axisLabel: {
+            fontSize: 14,
+        },
     },
     grid: {
         top: '33%',
@@ -1161,7 +1191,7 @@ function chartPopDefaultOptions9Fun(data:any) {
     })
 
     return {
-        color: colors.concat('#8AC0F6'),
+        color: colors.concat('#8AC0F6').reverse(),
         legend: {
             orient: 'horizontal', // 设置图例为水平方向  
             top: '15%',        // 设置图例离容器底部的距离为10%