Browse Source

修改问题

v2.0
suomingxiang 5 months ago
parent
commit
92f39eb29a
4 changed files with 20 additions and 41 deletions
  1. BIN
      public/video/maps.mp4
  2. BIN
      public/video/mapxl.mp4
  3. 16
    37
      src/pages/index.tsx
  4. 4
    4
      src/services/chartOption.ts

BIN
public/video/maps.mp4 View File


BIN
public/video/mapxl.mp4 View File


+ 16
- 37
src/pages/index.tsx View File

126
         getChartData()
126
         getChartData()
127
         const interval = setInterval(()=>{
127
         const interval = setInterval(()=>{
128
             getChartData()
128
             getChartData()
129
+           
130
+        },10000)
131
+        const interval2 = setInterval(()=>{
129
             if(barIndexRef.current == 0){
132
             if(barIndexRef.current == 0){
130
                 setBarIndex(1)
133
                 setBarIndex(1)
131
             }else{
134
             }else{
132
                 setBarIndex(0)
135
                 setBarIndex(0)
133
             }
136
             }
134
-        },30000)
137
+        },22200)
135
 
138
 
136
-        return () => clearInterval(interval)
139
+        return () => {
140
+            clearInterval(interval)
141
+            clearInterval(interval2)
142
+        }
137
     }, [])
143
     }, [])
138
 
144
 
139
     useEffect(() => {
145
     useEffect(() => {
146
 
152
 
147
     useEffect(() => {
153
     useEffect(() => {
148
         barIndexRef.current = barIndex;
154
         barIndexRef.current = barIndex;
155
+        let list = !barIndexRef.current ? chart3Data?.nameList : chart3Data?.nameListAbroad;
156
+        let list2 = !barIndexRef.current ? chart3Data?.data : chart3Data?.dataAbroad;
149
         setChartOptions3({
157
         setChartOptions3({
150
             yAxis: {
158
             yAxis: {
151
-                type: 'category',
152
-                data: !barIndex ? chart3Data?.nameList : chart3Data?.nameListAbroad,
153
-                axisTick: {
154
-                    show: false
155
-                },
156
-                nameTextStyle: {
157
-                    color: '#606060'
158
-                }
159
+                data: list,
159
             },
160
             },
160
             series: [
161
             series: [
161
-                {
162
-                    name: '航司销售额统计',
163
-                    type: 'bar',
164
-                    data: !barIndex ? chart3Data.data : chart3Data.dataAbroad,
165
-                    itemStyle: {
166
-                        // 设置柱状渐变色  
167
-                        color: new echarts.graphic.LinearGradient(
168
-                            0, 0, 1, 0, // 横向渐变,从左到右(x0, y0, x2, y2)  
169
-                            [
170
-                                { offset: 0, color: '#2667EC' }, // 起始颜色  
171
-                                { offset: 1, color: '#13C7FC' }  // 结束颜色  
172
-                            ]
173
-                        ),
174
-                    },
175
-                    label: {
176
-                        show: true, // 显示标签  
177
-                        position: 'right', // 标签显示在柱子顶部  
178
-                        formatter: '{c}', // 格式化标签内容,{c}表示当前柱子的数值  
179
-                        color: 'black', // 标签颜色,可以根据需要设置  
180
-                        fontSize: 12, // 标签字体大小,可以根据需要设置  
181
-                        // 其他label配置,如rich、backgroundColor、padding等,根据需要设置  
182
-                    },
183
-                    barWidth: '50%'
184
-                },
162
+                {data: list2},
185
             ]
163
             ]
186
         })
164
         })
187
         if(isModalOpen && chartIndex == 3){
165
         if(isModalOpen && chartIndex == 3){
188
             setOptions({
166
             setOptions({
189
                 yAxis: {
167
                 yAxis: {
190
-                    data: !barIndex ? chart3Data.nameList : chart3Data.nameListAbroad,
168
+                    data: list,
191
                 },
169
                 },
192
                 series: [
170
                 series: [
193
                     {
171
                     {
194
-                        data: !barIndex ? chart3Data.data : chart3Data.dataAbroad,
172
+                        data: list2,
195
                     },
173
                     },
196
                 ]
174
                 ]
197
             })
175
             })
252
             res.nameList = res.nameList.reverse()
230
             res.nameList = res.nameList.reverse()
253
             res.nameListAbroad = res.nameListAbroad.reverse()
231
             res.nameListAbroad = res.nameListAbroad.reverse()
254
             setChart3Data(res)
232
             setChart3Data(res)
233
+            setBarIndex(0)
255
             setChartOptions3({
234
             setChartOptions3({
256
                 yAxis: {
235
                 yAxis: {
257
                     data: res.nameList,  
236
                     data: res.nameList,  
470
                     </div>
449
                     </div>
471
                 </div>
450
                 </div>
472
                 <div className={`${styles.leftLi} ${styles.displayFlex}`}>
451
                 <div className={`${styles.leftLi} ${styles.displayFlex}`}>
473
-                    <div className={styles.chartBox2} style={{ width: '155px' }} onClick={() => openChart(2)}>
452
+                    <div className={styles.chartBox2} style={{ width: '180px' }} onClick={() => openChart(2)}>
474
                         <div className={styles.chartTitle}>国际销售额占比</div>
453
                         <div className={styles.chartTitle}>国际销售额占比</div>
475
                         <ReactEcharts option={chartOptions2} style={{ height: '178px', width: '100%' }} />
454
                         <ReactEcharts option={chartOptions2} style={{ height: '178px', width: '100%' }} />
476
                         <div className={`${styles.magnifier2}`}><img src={`${magnifierImg}`} alt="" /></div>
455
                         <div className={`${styles.magnifier2}`}><img src={`${magnifierImg}`} alt="" /></div>

+ 4
- 4
src/services/chartOption.ts View File

537
             data: [].sort(function (a, b) {
537
             data: [].sort(function (a, b) {
538
                 return b.value - a.value;
538
                 return b.value - a.value;
539
             }),
539
             }),
540
-            roseType: 'radius',
540
+            // roseType: 'radius',
541
             label: {
541
             label: {
542
                 show: false
542
                 show: false
543
             },
543
             },
810
         },
810
         },
811
         yAxis: {
811
         yAxis: {
812
             type: 'category',
812
             type: 'category',
813
-            data: data.nameList.reverse(),
813
+            data: data.nameList,
814
             axisTick: {
814
             axisTick: {
815
                 show: false
815
                 show: false
816
             },
816
             },
833
             {
833
             {
834
                 name: '航司销售额统计',
834
                 name: '航司销售额统计',
835
                 type: 'bar',
835
                 type: 'bar',
836
-                data: data.data.reverse(),
836
+                data: data.data,
837
                 itemStyle: {
837
                 itemStyle: {
838
                     // 设置柱状渐变色  
838
                     // 设置柱状渐变色  
839
                     color: new echarts.graphic.LinearGradient(
839
                     color: new echarts.graphic.LinearGradient(
1168
                 data: data.sort(function (a, b) {
1168
                 data: data.sort(function (a, b) {
1169
                     return b.value - a.value;
1169
                     return b.value - a.value;
1170
                 }),
1170
                 }),
1171
-                roseType: 'radius',
1171
+                // roseType: 'radius',
1172
                 label: {
1172
                 label: {
1173
                     show: false
1173
                     show: false
1174
                 },
1174
                 },

Loading…
Cancel
Save