4646 <div class =" flux-chart" >
4747 <div class =" statistics-area-chart" ref =" chartDom" ></div >
4848 </div >
49- <div class =" surplus " v-if =" info" >
50- 剩余流量: {{ parseFloat(( info.overall - info?.used).toFixed(3)) }}MB
49+ <div class =" flux " v-if =" info" >
50+ 已用流量: {{ info?.used }} MB / 流量总额: {{ info?.overall }} MB
5151 </div >
5252 </div >
5353</template >
@@ -72,6 +72,7 @@ const isNoData = ref<boolean>(true)
7272const getInfo = async () => {
7373 isLoading .value = true
7474 await GetInfo ().then ((res ) => {
75+ console .log (res )
7576 if (res .code === 1 ) {
7677 info .value = res .data
7778 isNoData .value = false ;
@@ -113,24 +114,24 @@ const updateOption = async () => {
113114 splitNumber: 8 ,
114115 type: ' gauge' ,
115116 itemStyle: {
116- color: ' #58D9F9 ' ,
117+ color: ' #aaa ' ,
117118 shadowColor: ' rgba(0,138,255,0.45)' ,
118119 shadowBlur: 10 ,
119120 shadowOffsetX: 2 ,
120121 shadowOffsetY: 2 ,
121122 },
122123 progress: {
123- show: true ,
124- width: 18
124+ show: false ,
125+ width: 18 ,
125126 },
126127 axisLine: {
127128 lineStyle: {
128129 width: 18 ,
129130 color: [
130- [0.25 , ' #7CFFB2 ' ],
131- [0.5 , ' #58D9F9 ' ],
132- [0.75 , ' #FDDD60 ' ],
133- [1 , ' #FF6E76 ' ]
131+ [0.25 , ' #FF6E76 ' ],
132+ [0.5 , ' #FDDD60 ' ],
133+ [0.75 , ' #58D9F9 ' ],
134+ [1 , ' #7CFFB2 ' ]
134135 ]
135136 }
136137 },
@@ -164,13 +165,13 @@ const updateOption = async () => {
164165 valueAnimation: true ,
165166 fontSize: 20 ,
166167 offsetCenter: [0 , ' 85%' ],
167- formatter: ' {value}' + ' MB' ,
168+ formatter: ' {value}' + ' MB' ,
168169 color: ' #fff'
169170 },
170171 data: [
171172 {
172- value: info .value ?.used ,
173- name: ' 已使用 ' ,
173+ value: parseFloat ((( info .value ?.overall ?? 0 ) - ( info . value ?. used ?? 0 )). toFixed ( 2 ) ?? 0 ) ,
174+ name: ' 剩余流量 ' ,
174175 }
175176 ]
176177 }
@@ -194,20 +195,25 @@ const updateInfo = async () => {
194195 myChart .value = echarts .init (chartDom .value );
195196 await updateOption ();
196197 }
198+ isLoading .value = false
197199}
198200
199201onMounted (async () => {
200202 EventsOn (" updateInfo" , async () => {
201203 isLoading .value = true
202204 await updateInfo ();
205+ isLoading .value = false
203206 })
207+ setTimeout (async () => {
208+ await updateInfo ()
209+ }, 3000 )
204210})
205211 </script >
206212
207213<style scoped>
208214.statistics-area-chart {
209- width : 240 px ;
210- height : 240 px ;
215+ width : 220 px ;
216+ height : 210 px ;
211217 text-align : center ;
212218}
213219
@@ -216,4 +222,9 @@ onMounted(async () => {
216222 justify-content : center ;
217223 text-align : center ;
218224}
225+
226+ .flux {
227+ font-size : 12px ;
228+ color : #aaa ;
229+ }
219230 </style >
0 commit comments