|
@@ -126,14 +126,20 @@ const Admin: React.FC = () => {
|
126
|
126
|
getChartData()
|
127
|
127
|
const interval = setInterval(()=>{
|
128
|
128
|
getChartData()
|
|
129
|
+
|
|
130
|
+ },10000)
|
|
131
|
+ const interval2 = setInterval(()=>{
|
129
|
132
|
if(barIndexRef.current == 0){
|
130
|
133
|
setBarIndex(1)
|
131
|
134
|
}else{
|
132
|
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
|
145
|
useEffect(() => {
|
|
@@ -146,52 +152,24 @@ const Admin: React.FC = () => {
|
146
|
152
|
|
147
|
153
|
useEffect(() => {
|
148
|
154
|
barIndexRef.current = barIndex;
|
|
155
|
+ let list = !barIndexRef.current ? chart3Data?.nameList : chart3Data?.nameListAbroad;
|
|
156
|
+ let list2 = !barIndexRef.current ? chart3Data?.data : chart3Data?.dataAbroad;
|
149
|
157
|
setChartOptions3({
|
150
|
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
|
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
|
165
|
if(isModalOpen && chartIndex == 3){
|
188
|
166
|
setOptions({
|
189
|
167
|
yAxis: {
|
190
|
|
- data: !barIndex ? chart3Data.nameList : chart3Data.nameListAbroad,
|
|
168
|
+ data: list,
|
191
|
169
|
},
|
192
|
170
|
series: [
|
193
|
171
|
{
|
194
|
|
- data: !barIndex ? chart3Data.data : chart3Data.dataAbroad,
|
|
172
|
+ data: list2,
|
195
|
173
|
},
|
196
|
174
|
]
|
197
|
175
|
})
|
|
@@ -252,6 +230,7 @@ const Admin: React.FC = () => {
|
252
|
230
|
res.nameList = res.nameList.reverse()
|
253
|
231
|
res.nameListAbroad = res.nameListAbroad.reverse()
|
254
|
232
|
setChart3Data(res)
|
|
233
|
+ setBarIndex(0)
|
255
|
234
|
setChartOptions3({
|
256
|
235
|
yAxis: {
|
257
|
236
|
data: res.nameList,
|
|
@@ -470,7 +449,7 @@ const Admin: React.FC = () => {
|
470
|
449
|
</div>
|
471
|
450
|
</div>
|
472
|
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
|
453
|
<div className={styles.chartTitle}>国际销售额占比</div>
|
475
|
454
|
<ReactEcharts option={chartOptions2} style={{ height: '178px', width: '100%' }} />
|
476
|
455
|
<div className={`${styles.magnifier2}`}><img src={`${magnifierImg}`} alt="" /></div>
|