Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
65d3b4bb by zhangmeng
Options

饼图

1 parent 14368e7c
Inline Side-by-side
Showing 4 changed files with 260 additions and 193 deletions
src/layoutPc/components/AppHeader.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <LoginDialog ref="pcloginDialog" @submitForm="reFlash"/> 7 <LoginDialog ref="pcloginDialog" @submitForm="reFlash"/>
8 <!-- <img alt="" src="@/assets/image/top.png" style="width: 100%">--> 8 <!-- <img alt="" src="@/assets/image/top.png" style="width: 100%">-->
9 <h1 class="text-top pd20"> 9 <h1 class="text-top pd20">
10 数据统计截至2025-03-20 12:00:30 10 数据统计截至{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}
11 </h1> 11 </h1>
12 <div class="date"> 12 <div class="date">
13 <svg :height="`calc(100*100vw/1920)`" :width="`calc(300*100vw/1920)`" xmlns="http://www.w3.org/2000/svg"> 13 <svg :height="`calc(100*100vw/1920)`" :width="`calc(300*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
30 import {computed, ref, watch} from 'vue' 30 import {computed, ref, watch} from 'vue'
31 import {useRoute, useRouter} from 'vue-router' 31 import {useRoute, useRouter} from 'vue-router'
32 import useUserStore from '@/store/modules/user' 32 import useUserStore from '@/store/modules/user'
33 import {Search, UserFilled} from '@element-plus/icons-vue'
34 import {getCurrentInstance, onMounted} from '@vue/runtime-core' 33 import {getCurrentInstance, onMounted} from '@vue/runtime-core'
35 import _ from 'lodash' 34 import _ from 'lodash'
36 import LoginDialog from '@/viewsPc/login' 35 import LoginDialog from '@/viewsPc/login'
...@@ -91,10 +90,9 @@ watch(() => useUserStore().visitor, (val) => { ...@@ -91,10 +90,9 @@ watch(() => useUserStore().visitor, (val) => {
91 90
92 <style lang="scss" scoped> 91 <style lang="scss" scoped>
93 h1 { 92 h1 {
94 font-family: 'YouSheBiaoTiHei'; 93 font-family: 'YouSheBiaoTiHei', serif;
95 position: relative; 94 position: relative;
96 top: calc(15 * 100vw / 1920); 95 top: calc(15 * 100vw / 1920);
97 //background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
98 font-size: calc(32 * 100vw / 1920); 96 font-size: calc(32 * 100vw / 1920);
99 //-webkit-background-clip: text; 97 //-webkit-background-clip: text;
100 //-webkit-text-fill-color: transparent; 98 //-webkit-text-fill-color: transparent;
......
src/layoutPc/index.vue
...@@ -22,6 +22,7 @@ import {AppMain, AppHeader, AppBottom} from './components' ...@@ -22,6 +22,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
22 .bg { 22 .bg {
23 width: 100vw; 23 width: 100vw;
24 height: 100vh; 24 height: 100vh;
25 //overflow: hidden;
25 //background: rgba(0,0,0,0.75) 26 //background: rgba(0,0,0,0.75)
26 background: url("@/assets/image/bg@2x.png") no-repeat top center; 27 background: url("@/assets/image/bg@2x.png") no-repeat top center;
27 background-size: 100% 100%; 28 background-size: 100% 100%;
......
src/viewsPc/home.vue
...@@ -19,16 +19,7 @@ ...@@ -19,16 +19,7 @@
19 import LeftPage from "@/viewsPc/vip/leftPage" 19 import LeftPage from "@/viewsPc/vip/leftPage"
20 import CenterPage from "@/viewsPc/vip/centerPage" 20 import CenterPage from "@/viewsPc/vip/centerPage"
21 import RightPage from "@/viewsPc/vip/rightPage" 21 import RightPage from "@/viewsPc/vip/rightPage"
22 import {onBeforeUnmount, ref} from "vue";
23 import {useStorage} from "@vueuse/core/index";
24 import {getCurrentInstance, onMounted, onUnmounted} from "@vue/runtime-core";
25 22
26 const {proxy} = getCurrentInstance()
27
28
29 onMounted(() => {
30
31 })
32 </script> 23 </script>
33 24
34 <style lang="scss" scoped> 25 <style lang="scss" scoped>
......
src/viewsPc/vip/leftPage.vue
...@@ -2,27 +2,65 @@ ...@@ -2,27 +2,65 @@
2 <div class="pd20"> 2 <div class="pd20">
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">应收款余额</div> 4 <div class="title">应收款余额</div>
5 <div class="po_right"> 5 <!-- <div class="po_right">-->
6 <el-radio-group v-model="radioA" size="small" @change="radioAChange"> 6 <!-- <el-radio-group v-model="radioA" size="small" @change="radioAChange">-->
7 <el-radio-button label="本月" value="month"/> 7 <!-- <el-radio-button label="本月" value="month"/>-->
8 <el-radio-button label="本季度" value="quarter"/> 8 <!-- <el-radio-button label="本季度" value="quarter"/>-->
9 <el-radio-button label="本年" value="year"/> 9 <!-- <el-radio-button label="本年" value="year"/>-->
10 </el-radio-group> 10 <!-- </el-radio-group>-->
11 <!-- </div>-->
12 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
11 </div> 13 </div>
12 <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> 14
15 <div class="chartCard mt30">
16 <div>
17 <div class="title">应收账款余额与收入</div>
18 <!-- <div class="title">-->
19 <!-- <el-select>-->
20 <!-- <el-option label="全部基地(可多选)" value="month"/>-->
21 <!-- </el-select>-->
22 <!-- </div>-->
23 <!-- <div class="title">-->
24 <!-- <el-select>-->
25 <!-- <el-option label="数据因素(可多选)" value="month"/>-->
26 <!-- </el-select>-->
27 <!-- </div>-->
28
13 </div> 29 </div>
30 <!-- <div class="po_right">-->
31 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
32 <!-- <el-radio-button label="本月" value="month"/>-->
33 <!-- <el-radio-button label="本季度" value="quarter"/>-->
34 <!-- <el-radio-button label="本年" value="year"/>-->
35 <!-- </el-radio-group>-->
36 <!-- </div>-->
14 37
38 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
39 </div>
15 <div class="chartCard mt30"> 40 <div class="chartCard mt30">
16 <div class="title">档案检索情况</div> 41 <div>
17 <div class="po_right"> 42 <div class="title">应收账款余额组成</div>
18 <el-radio-group v-model="radioB" size="small" @change="radioBChange"> 43 <!-- <div class="title">-->
19 <el-radio-button label="本月" value="month"/> 44 <!-- <el-select>-->
20 <el-radio-button label="本季度" value="quarter"/> 45 <!-- <el-option label="全部基地(可多选)" value="month"/>-->
21 <el-radio-button label="本年" value="year"/> 46 <!-- </el-select>-->
22 </el-radio-group> 47 <!-- </div>-->
48 <!-- <div class="title">-->
49 <!-- <el-select>-->
50 <!-- <el-option label="数据因素(可多选)" value="month"/>-->
51 <!-- </el-select>-->
52 <!-- </div>-->
53
23 </div> 54 </div>
55 <!-- <div class="po_right">-->
56 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
57 <!-- <el-radio-button label="本月" value="month"/>-->
58 <!-- <el-radio-button label="本季度" value="quarter"/>-->
59 <!-- <el-radio-button label="本年" value="year"/>-->
60 <!-- </el-radio-group>-->
61 <!-- </div>-->
24 62
25 <div ref="lineRef" style="width: 100%; height: 40vh;"></div> 63 <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
26 </div> 64 </div>
27 </div> 65 </div>
28 </template> 66 </template>
...@@ -30,25 +68,29 @@ ...@@ -30,25 +68,29 @@
30 <script setup> 68 <script setup>
31 import {onMounted, ref, onUnmounted} from 'vue' 69 import {onMounted, ref, onUnmounted} from 'vue'
32 70
33 import _ from 'lodash'
34 import {autoToolTip} from "@/plugins/auto-toolTip"; 71 import {autoToolTip} from "@/plugins/auto-toolTip";
35 import * as echarts from "echarts"; 72 import * as echarts from "echarts";
36 import * as api from "@/apiPc/common" 73 import * as api from "@/apiPc/common"
37 74
38 const zhuRef = ref(null) 75 const zhuRef = ref(null)
39 const lineRef = ref(null) 76 const lineRef = ref(null)
77 const payeeRef = ref(null)
40 const kindList = ref([]) 78 const kindList = ref([])
41 const dataA = ref([]) 79 const dataA = ref([])
42 const radioA = ref('month') 80 const radioA = ref('month')
43 const radioB = ref('month') 81 const radioB = ref('month')
44 let chartA 82 let chartA
45 let chartB 83 let chartB
84 let chartC
46 85
47 let intervalA = null; 86 let intervalA = null;
48 87
49 onMounted(() => { 88 onMounted(() => {
50 // init() 89 // init()
51 window.addEventListener('resize', handleResize); 90 window.addEventListener('resize', handleResize);
91 setA()
92 setB()
93 setC()
52 }) 94 })
53 95
54 const init = () => { 96 const init = () => {
...@@ -95,210 +137,243 @@ const getBdata = () => { ...@@ -95,210 +137,243 @@ const getBdata = () => {
95 const setA = () => { 137 const setA = () => {
96 chartA = echarts.init(zhuRef.value) 138 chartA = echarts.init(zhuRef.value)
97 const option = { 139 const option = {
98 animation: true, 140 tooltip: {
99 // dataset: dataA.value, 141 trigger: 'item'
100 // dataZoom: [ 142 },
101 // { 143 legend: {
102 // show: false, 144 orient: 'vertical',
103 // start: 0, 145 right: 20,
104 // end: 100 146 top: '12%',
105 // }, 147 bottom: 20,
106 // { 148 textStyle: {
107 // type: 'inside', 149 color: '#FFF'
108 // start: 0,
109 // end: 100
110 // }
111 // ],
112 xAxis: [{
113 data: kindList.value,
114 axisLabel: {
115 inside: false,
116 color: '#7ECEF4',
117 fontSize: '1.1rem'
118 },
119 axisTick: {
120 show: false
121 }, 150 },
122 axisLine: { 151 formatter: function (name) {
123 show: true, 152 let value = 0
124 lineStyle: { 153 for (let i = 0; i < option.series[2].data.length; i++) {
125 color: 'RGBA(38, 81, 128, 1)' 154 if (option.series[2].data[i].name === name) {
155 value = option.series[2].data[i].value;
156 break;
126 } 157 }
158 }
159 // 计算百分比
160 let percentage = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2) + '%';
161 return name + ' ' + percentage;
127 }, 162 },
128 z: 10
129 }],
130 yAxis: {
131 name: '单位(次)',
132 nameTextStyle: {
133 color: '#7ECEF4',
134 fontSize: '1.2rem'
135 }, 163 },
136 axisLine: { 164 series: [
137 show: false 165 {
166 type: 'pie',
167 center: ['25%', '50%'],
168 radius: '5%',
169 emphasis: {
170 radius: '5%',
171 show: false,
138 }, 172 },
139 axisTick: { 173 data: [
174 {value: 110, name: ''},
175 ],
176 label: {
177 show: false,
178 emphasis: {
140 show: false 179 show: false
141 },
142 axisLabel: {
143 color: '#7ECEF4',
144 fontSize: '1.3rem'
145 },
146 splitLine: {
147 show: true,
148 lineStyle: {
149 color: 'RGBA(38, 81, 128, 1)',
150 type: 'dashed'
151 } 180 }
152 } 181 }
153 }, 182 },
154 tooltip: { 183 {
155 alwaysShowContent: true, 184 type: 'pie',
156 formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`, 185 // selectedMode: 'single',
157 backgroundColor: 'transparent', 186 center: ['25%', '50%'],
158 borderWidth: 0, 187 radius: ['8%', '10%'],
159 extraCssText: 'box-shadow:none', 188 avoidLabelOverlap: false,
160 position: 'top', 189 label: {
161 textStyle: { 190 show: false,
162 color: '#fff', 191 emphasis: {
163 fontWeight: 'bold', 192 show: false
164 fontSize: '1rem'
165 } 193 }
166 }, 194 },
167 series: [ 195 data: [
196 {value: 12, name: ''},
197 ]
198 },
168 { 199 {
169 type: 'bar', 200 name: '应收款余额',
170 barWidth: '10', 201 type: 'pie',
171 showBackground: false, 202 center: ['25%', '50%'],
203 radius: ['30%', '70%'],
204 avoidLabelOverlap: false,
172 itemStyle: { 205 itemStyle: {
173 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 206 borderWidth: 2,
174 {offset: 1, color: '#037FC9'}, 207 // borderColor: '#fff',
175 {offset: 0, color: '#0C3C7E'} 208 },
176 ]) 209 label: {
210 show: false,
211 // position: 'center'
177 }, 212 },
178 emphasis: { 213 emphasis: {
179 itemStyle: { 214 label: {
180 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 215 show: false,
181 {offset: 1, color: '#2378f7'}, 216 fontSize: 20,
182 {offset: 0, color: '#83bff6'} 217 fontWeight: 'bold'
183 ])
184 } 218 }
185 }, 219 },
186 data: dataA.value 220 labelLine: {
187 } 221 show: false
222 },
223 data: [
224 {value: 1048, name: '山西'},
225 {value: 735, name: '深圳'},
226 {value: 580, name: '上海'},
227 {value: 484, name: '海南'},
228 {value: 484, name: '郑州'},
229 {value: 484, name: '合肥'},
230 {value: 484, name: '武汉'},
231 {value: 300, name: '新疆'}
188 ] 232 ]
189 } 233 }
234 ]
235 };
190 chartA.setOption(option) 236 chartA.setOption(option)
191 autoHover(chartA, option, 0, 2000) 237 autoHover(chartA, option, 2, 2000)
192 } 238 }
193 239
194 const setB = () => { 240 const setB = () => {
195 chartB = echarts.init(lineRef.value) 241 chartB = echarts.init(lineRef.value)
196 const option = { 242 const option = {
197 animation: true,
198 grid: {
199 top: '15%',
200 left: '12%',
201 right: '12%',
202 bottom: '12%'
203 },
204 // dataZoom: [
205 // {
206 // show: false,
207 // start: 0,
208 // end: 50
209 // },
210 // {
211 // type: 'inside',
212 // start: 0,
213 // end: 50
214 // }
215 // ],
216 tooltip: { 243 tooltip: {
217 trigger: 'item', 244 trigger: 'axis',
218 formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`, 245 axisPointer: {
219 renderModer: 'html', 246 type: 'shadow'
220 // alignItems: 'center',
221 className: 'downDot',
222 backgroundColor: 'rgba(8,13,86,0.2)',
223 borderWidth: 0,
224 extraCssText: 'box-shadow:none',
225 position: 'top',
226 textStyle: {
227 color: '#fff',
228 fontWeight: 'bold',
229 fontSize: '10rem'
230 } 247 }
231 }, 248 },
232 xAxis: { 249 legend: {
233 type: 'category', 250 top: '10%',
234 boundaryGap: false, 251 textStyle: {
235 data: kindList.value, 252 color: '#FFF'
236 axisTick: { 253 },
237 show: false
238 }, 254 },
239 axisLabel: { 255 grid: {
240 color: '#7ECEF4', 256 left: '3%',
241 fontSize: '1.1rem' 257 right: '4%',
258 bottom: '3%',
259 containLabel: true
242 }, 260 },
243 axisLine: { 261 xAxis: [
244 show: true, 262 {
245 lineStyle: { 263 type: 'category',
246 color: 'RGBA(38, 81, 128, 1)' 264 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
247 } 265 }
266 ],
267 yAxis: [
268 {
269 type: 'value',
270 name: '金额(万元)',
271 }
272 ],
273 series: [
274 {
275 name: '2025年应收账款余额',
276 type: 'bar',
277 emphasis: {
278 focus: 'series'
248 }, 279 },
280 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
249 }, 281 },
250 yAxis: { 282 {
251 name: '单位(次)', 283 name: '2024年应收账款余额',
252 nameTextStyle: { 284 type: 'bar',
253 color: '#7ECEF4', 285 emphasis: {
254 fontSize: '1.2rem' 286 focus: 'series'
255 }, 287 },
256 type: 'value', 288 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
257 axisLabel: {
258 fontSize: '1.3rem'
259 }, 289 },
260 axisLine: { 290 {
261 lineStyle: { 291 name: '2025年收入',
262 color: '#03DAFD', 292 type: 'bar',
263 } 293 emphasis: {
294 focus: 'series'
295 },
296 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
297 },
298 {
299 name: '2024年收入',
300 type: 'bar',
301 emphasis: {
302 focus: 'series'
264 }, 303 },
265 splitLine: { 304 data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
266 show: true, 305 },
267 lineStyle: { 306 ]
268 color: 'RGBA(38, 81, 128, 1)',
269 type: 'dashed'
270 } 307 }
308 chartB.setOption(option)
309 autoHover(chartB, option, 0, 2000)
310 }
311 const setC = () => {
312 chartC = echarts.init(payeeRef.value)
313 const option = {
314 tooltip: {
315 trigger: 'axis',
316 axisPointer: {
317 type: 'shadow'
271 } 318 }
272 }, 319 },
320 legend: {
321 top: '10%',
322 textStyle: {
323 color: '#FFF'
324 },
325 },
326 grid: {
327 left: '3%',
328 right: '4%',
329 bottom: '3%',
330 containLabel: true
331 },
332 xAxis: [
333 {
334 type: 'category',
335 stack: 'Ad',
336 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
337 }
338 ],
339 yAxis: [
340 {
341 type: 'value',
342 name: '金额(万元)',
343 }
344 ],
273 series: [ 345 series: [
274 { 346 {
275 data: dataA.value, 347 name: '代收款',
276 type: 'line', 348 type: 'bar',
277 itemStyle: { 349 stack: 'Ad',
278 borderWidth: '0', 350 emphasis: {
279 color: '#03DAFD', 351 focus: 'series'
280 }, 352 },
353 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
354 },
355 {
356 name: '收费单待签',
357 type: 'bar',
358 stack: 'Ad',
281 emphasis: { 359 emphasis: {
282 itemStyle: { 360 focus: 'series'
283 color: '#fff', 361 },
284 borderColor: '#fff', 362 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
285 borderWidth: '4', 363 },
286 shadowColor: '#fff', 364 {
287 shadowBlur: '4', 365 name: '合同待签',
288 } 366 type: 'bar',
367 stack: 'Ad',
368 emphasis: {
369 focus: 'series'
370 },
371 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
289 }, 372 },
290 label: {
291 show: false,
292 position: 'bottom',
293 formatter: '{c}',
294 fontSize: '1rem',
295 color: '#03DAFD'
296 }
297 }
298 ] 373 ]
299 } 374 }
300 chartB.setOption(option) 375 chartC.setOption(option)
301 autoHover(chartB, option, 0, 2000) 376 autoHover(chartC, option, 0, 2000)
302 } 377 }
303 378
304 const radioAChange = (e) => { 379 const radioAChange = (e) => {
...@@ -328,6 +403,7 @@ function autoHover(myChart, option, index, time) { ...@@ -328,6 +403,7 @@ function autoHover(myChart, option, index, time) {
328 function handleResize() { 403 function handleResize() {
329 chartA?.resize() 404 chartA?.resize()
330 chartB?.resize() 405 chartB?.resize()
406 chartC?.resize()
331 } 407 }
332 408
333 onUnmounted(() => { 409 onUnmounted(() => {
...@@ -345,14 +421,15 @@ onUnmounted(() => { ...@@ -345,14 +421,15 @@ onUnmounted(() => {
345 } 421 }
346 422
347 .title { 423 .title {
348 padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0; 424 font-family: PingFang SC, serif;
349 font-family: 'YouSheBiaoTiHei'; 425 font-weight: 600;
350 color: #FFFFFF; 426 color: #FFFFFF;
351 //text-shadow: 0px 4px 3px #003F85; 427 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
352 font-size: calc(17 * 100vw / 1920); 428 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
353 background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
354 -webkit-background-clip: text; 429 -webkit-background-clip: text;
355 -webkit-text-fill-color: transparent; 430 -webkit-text-fill-color: transparent;
431 padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
432 font-size: calc(20 * 100vw / 1920);
356 position: relative; 433 position: relative;
357 434
358 &::after { 435 &::after {
...@@ -380,7 +457,7 @@ onUnmounted(() => { ...@@ -380,7 +457,7 @@ onUnmounted(() => {
380 } 457 }
381 458
382 .chartCard { 459 .chartCard {
383 background: url("@/assets/img/box_bg.png") no-repeat top left; 460 background: url("@/assets/image/box01@2x.png") no-repeat top left;
384 background-size: 100% 100%; 461 background-size: 100% 100%;
385 position: relative; 462 position: relative;
386 overflow: hidden; 463 overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!