Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
174aa61b by zhangmeng
Options

大屏

1 parent 59939518
Inline Side-by-side
Showing 1 changed file with 177 additions and 31 deletions
src/viewsPc/vip/centerPage.vue
...@@ -81,9 +81,12 @@ ...@@ -81,9 +81,12 @@
81 </div> 81 </div>
82 <hr> 82 <hr>
83 </div> 83 </div>
84 <div> 84 <div class="father">
85 <div class="bingTitle tex4">
86 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
87 DSO天数
88 </div>
85 <div ref="zhuRef4" style="width: 100%;height: 17vh"> 89 <div ref="zhuRef4" style="width: 100%;height: 17vh">
86 1234
87 </div> 90 </div>
88 </div> 91 </div>
89 </div> 92 </div>
...@@ -212,7 +215,7 @@ const handelBing1 = () => { ...@@ -212,7 +215,7 @@ const handelBing1 = () => {
212 {value: 1048, name: 'Search Engine'}, 215 {value: 1048, name: 'Search Engine'},
213 ], 216 ],
214 itemStyle: { 217 itemStyle: {
215 color: 'rgba(1, 162, 237, .5)', 218 color: 'rgba(1, 162, 237, .3)',
216 }, 219 },
217 }, 220 },
218 { 221 {
...@@ -236,7 +239,7 @@ const handelBing1 = () => { ...@@ -236,7 +239,7 @@ const handelBing1 = () => {
236 {value: 735, name: '2025'} 239 {value: 735, name: '2025'}
237 ], 240 ],
238 itemStyle: { 241 itemStyle: {
239 color: 'rgba(1, 162, 237, .5)', 242 color: 'rgba(1, 162, 237, .3)',
240 }, 243 },
241 }, 244 },
242 { 245 {
...@@ -264,7 +267,6 @@ const handelBing1 = () => { ...@@ -264,7 +267,6 @@ const handelBing1 = () => {
264 ] 267 ]
265 }, 268 },
266 }, 269 },
267 barWidth: '40%'
268 } 270 }
269 ] 271 ]
270 } 272 }
...@@ -288,9 +290,6 @@ const handelBing2 = () => { ...@@ -288,9 +290,6 @@ const handelBing2 = () => {
288 label: { 290 label: {
289 show: false 291 show: false
290 }, 292 },
291 itemStyle: {
292 borderWidth: 2
293 },
294 emphasis: { 293 emphasis: {
295 scale: false 294 scale: false
296 }, 295 },
...@@ -300,7 +299,11 @@ const handelBing2 = () => { ...@@ -300,7 +299,11 @@ const handelBing2 = () => {
300 {value: 48, name: '1'}, 299 {value: 48, name: '1'},
301 {value: 1, name: '1'}, 300 {value: 1, name: '1'},
302 {value: 48, name: '1'} 301 {value: 48, name: '1'}
303 ] 302 ],
303 itemStyle: {
304 color: 'rgba(1, 162, 237, 1)',
305 },
306 barWidth: 2
304 }, 307 },
305 { 308 {
306 name: '2', 309 name: '2',
...@@ -317,9 +320,12 @@ const handelBing2 = () => { ...@@ -317,9 +320,12 @@ const handelBing2 = () => {
317 scale: false 320 scale: false
318 }, 321 },
319 data: [ 322 data: [
320 {value: 1048, name: 'Search Engine'}, 323 {value: 1048, name: 'Search Engine', itemStyle: {color: "rgba(0, 255, 190,1)"}},
321 {value: 735, name: 'Direct'} 324 {value: 735, name: 'Direct'}
322 ] 325 ],
326 itemStyle: {
327 color: 'rgba(1, 162, 237, .5)',
328 },
323 }, 329 },
324 { 330 {
325 name: '3', 331 name: '3',
...@@ -339,8 +345,17 @@ const handelBing2 = () => { ...@@ -339,8 +345,17 @@ const handelBing2 = () => {
339 endAngle: 360, 345 endAngle: 360,
340 data: [ 346 data: [
341 {value: 1048, name: '2025'}, 347 {value: 1048, name: '2025'},
342 {value: 735, name: '2025'} 348 ],
343 ] 349 itemStyle: {
350 color: {
351 type: 'linear',
352 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
353 colorStops: [
354 {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
355 {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
356 ]
357 },
358 },
344 }, 359 },
345 ] 360 ]
346 } 361 }
...@@ -364,9 +379,6 @@ const handelBing3 = () => { ...@@ -364,9 +379,6 @@ const handelBing3 = () => {
364 label: { 379 label: {
365 show: false 380 show: false
366 }, 381 },
367 itemStyle: {
368 borderWidth: 2
369 },
370 emphasis: { 382 emphasis: {
371 scale: false 383 scale: false
372 }, 384 },
...@@ -376,7 +388,10 @@ const handelBing3 = () => { ...@@ -376,7 +388,10 @@ const handelBing3 = () => {
376 {value: 48, name: '1'}, 388 {value: 48, name: '1'},
377 {value: 1, name: '1'}, 389 {value: 1, name: '1'},
378 {value: 48, name: '1'} 390 {value: 48, name: '1'}
379 ] 391 ],
392 itemStyle: {
393 color: 'rgba(1, 162, 237, 1)',
394 },
380 }, 395 },
381 { 396 {
382 name: '2', 397 name: '2',
...@@ -393,9 +408,24 @@ const handelBing3 = () => { ...@@ -393,9 +408,24 @@ const handelBing3 = () => {
393 scale: false 408 scale: false
394 }, 409 },
395 data: [ 410 data: [
396 {value: 1048, name: 'Search Engine'}, 411 {
412 value: 1048, name: 'Search Engine',
413 itemStyle: {
414 color: {
415 type: 'linear',
416 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
417 colorStops: [
418 {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
419 {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
420 ]
421 }
422 }
423 },
397 {value: 735, name: 'Direct'} 424 {value: 735, name: 'Direct'}
398 ] 425 ],
426 itemStyle: {
427 color: 'rgba(1, 162, 237, .3)',
428 },
399 }, 429 },
400 { 430 {
401 name: '3', 431 name: '3',
...@@ -415,8 +445,17 @@ const handelBing3 = () => { ...@@ -415,8 +445,17 @@ const handelBing3 = () => {
415 endAngle: 360, 445 endAngle: 360,
416 data: [ 446 data: [
417 {value: 1048, name: '2025'}, 447 {value: 1048, name: '2025'},
418 {value: 735, name: '2025'} 448 ],
419 ] 449 itemStyle: {
450 color: {
451 type: 'linear',
452 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
453 colorStops: [
454 {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
455 {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
456 ]
457 },
458 },
420 }, 459 },
421 ] 460 ]
422 } 461 }
...@@ -548,23 +587,53 @@ const handelZhu2 = () => { ...@@ -548,23 +587,53 @@ const handelZhu2 = () => {
548 xAxis: [ 587 xAxis: [
549 { 588 {
550 type: 'category', 589 type: 'category',
551 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] 590 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
591 axisLine: {
592 show: true,
593 lineStyle: {
594 color: '#fff',
595 width: 2,
596 type: 'solid'
597 }
598 },
552 } 599 }
553 ], 600 ],
554 yAxis: [ 601 yAxis: [
555 { 602 {
556 type: 'value', 603 type: 'value',
557 name: '单位(万)', 604 name: '单位(万)',
605 axisLine: {
606 show: true,
607 lineStyle: {
608 color: '#fff',
609 width: 1,
610 type: 'solid'
611 }
612 },
558 } 613 }
559 ], 614 ],
560 series: [ 615 series: [
561 { 616 {
562 name: '2025年', 617 name: '2025年',
563 type: 'bar', 618 type: 'bar',
619 barGap: 0,
564 emphasis: { 620 emphasis: {
565 focus: 'series' 621 focus: 'series'
566 }, 622 },
567 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,] 623 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
624 itemStyle: {
625 color: {
626 type: 'linear',
627 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
628 colorStops: [
629 {offset: 0, color: 'rgba(32, 217, 170, 1)'}, // 顶部颜色
630 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
631 ]
632 },
633 borderColor: 'rgba(0, 255, 190, 1)',
634 borderWidth: 1
635 },
636 barWidth: '35%',
568 }, 637 },
569 { 638 {
570 name: '2024年', 639 name: '2024年',
...@@ -572,7 +641,20 @@ const handelZhu2 = () => { ...@@ -572,7 +641,20 @@ const handelZhu2 = () => {
572 emphasis: { 641 emphasis: {
573 focus: 'series' 642 focus: 'series'
574 }, 643 },
575 data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410] 644 data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
645 itemStyle: {
646 color: {
647 type: 'linear',
648 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
649 colorStops: [
650 {offset: 0, color: 'rgba(32, 217, 170, .5)'}, // 顶部颜色
651 {offset: 1, color: 'rgba(8, 130, 160, .5)'} // 底部颜色
652 ]
653 },
654 borderColor: 'rgba(0, 255, 190, 1)',
655 borderWidth: 1
656 },
657 barWidth: '35%',
576 }, 658 },
577 ] 659 ]
578 } 660 }
...@@ -584,7 +666,7 @@ const handelZhu3 = () => { ...@@ -584,7 +666,7 @@ const handelZhu3 = () => {
584 const option = { 666 const option = {
585 color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], 667 color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
586 title: { 668 title: {
587 text: '2025年' 669 text: ''
588 }, 670 },
589 tooltip: { 671 tooltip: {
590 trigger: 'axis', 672 trigger: 'axis',
...@@ -616,12 +698,28 @@ const handelZhu3 = () => { ...@@ -616,12 +698,28 @@ const handelZhu3 = () => {
616 { 698 {
617 type: 'category', 699 type: 'category',
618 boundaryGap: false, 700 boundaryGap: false,
619 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] 701 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
702 axisLine: {
703 show: true,
704 lineStyle: {
705 color: '#fff',
706 width: 2,
707 type: 'solid'
708 }
709 },
620 } 710 }
621 ], 711 ],
622 yAxis: [ 712 yAxis: [
623 { 713 {
624 type: 'value' 714 type: 'value',
715 axisLine: {
716 show: true,
717 lineStyle: {
718 color: '#fff',
719 width: 1,
720 type: 'solid'
721 }
722 },
625 } 723 }
626 ], 724 ],
627 series: [ 725 series: [
...@@ -631,7 +729,7 @@ const handelZhu3 = () => { ...@@ -631,7 +729,7 @@ const handelZhu3 = () => {
631 stack: 'Total', 729 stack: 'Total',
632 smooth: false, 730 smooth: false,
633 lineStyle: { 731 lineStyle: {
634 width: 0 732 width: 2
635 }, 733 },
636 showSymbol: false, 734 showSymbol: false,
637 areaStyle: { 735 areaStyle: {
...@@ -658,7 +756,7 @@ const handelZhu3 = () => { ...@@ -658,7 +756,7 @@ const handelZhu3 = () => {
658 stack: 'Total', 756 stack: 'Total',
659 smooth: false, 757 smooth: false,
660 lineStyle: { 758 lineStyle: {
661 width: 0 759 width: 2
662 }, 760 },
663 showSymbol: false, 761 showSymbol: false,
664 areaStyle: { 762 areaStyle: {
...@@ -708,13 +806,29 @@ const handelZhu4 = () => { ...@@ -708,13 +806,29 @@ const handelZhu4 = () => {
708 { 806 {
709 type: 'category', 807 type: 'category',
710 stack: 'Ad', 808 stack: 'Ad',
711 data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海'] 809 data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海'],
810 axisLine: {
811 show: true,
812 lineStyle: {
813 color: '#fff',
814 width: 2,
815 type: 'solid'
816 }
817 },
712 } 818 }
713 ], 819 ],
714 yAxis: [ 820 yAxis: [
715 { 821 {
716 type: 'value', 822 type: 'value',
717 name: '金额(万元)', 823 name: '金额(万元)',
824 axisLine: {
825 show: true,
826 lineStyle: {
827 color: '#fff',
828 width: 1,
829 type: 'solid'
830 }
831 },
718 } 832 }
719 ], 833 ],
720 series: [ 834 series: [
...@@ -725,7 +839,20 @@ const handelZhu4 = () => { ...@@ -725,7 +839,20 @@ const handelZhu4 = () => {
725 emphasis: { 839 emphasis: {
726 focus: 'series' 840 focus: 'series'
727 }, 841 },
728 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390] 842 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
843 itemStyle: {
844 color: {
845 type: 'linear',
846 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
847 colorStops: [
848 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
849 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
850 ]
851 },
852 borderColor: 'rgba(0, 255, 190, 1)',
853 borderWidth: 1
854 },
855 barWidth: '35%',
729 }, 856 },
730 ] 857 ]
731 } 858 }
...@@ -755,6 +882,25 @@ function autoHover(myChart, option, index, time) { ...@@ -755,6 +882,25 @@ function autoHover(myChart, option, index, time) {
755 .father { 882 .father {
756 position: relative; 883 position: relative;
757 884
885 .tex4 {
886 position: absolute;
887 font-family: PingFang SC, serif;
888 font-weight: 500;
889 font-size: calc(18 * 100vw / 1920);
890 color: #D1D6DF;
891 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
892 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
893 -webkit-background-clip: text;
894 -webkit-text-fill-color: transparent;
895 display: flex;
896 margin-top: calc(5 * 100vw / 1920);
897
898 .titleImg {
899 display: block;
900 width: calc(50 * 100vw / 1920);
901 height: calc(20 * 100vw / 1920);
902 }
903 }
758 } 904 }
759 905
760 .dong { 906 .dong {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!