大屏

zhangmeng
Showing 1 changed file with 121 additions and 28 deletions
src/viewsPc/vip/centerPage.vue
--- a/src/viewsPc/vip/centerPage.vue
View file @5993951
+++ b/src/viewsPc/vip/centerPage.vue
View file @5993951
@@ -25,7 +25,7 @@
    </div>
    <div class="bottom">
-      <div class="father">
+      <div class="father dong">
        <div style="display: flex">
          <div class="bing" style="width: 30%">
            <div class="bingTitle">
@@ -173,13 +173,11 @@ const handelBing1 = () => {
        name: '1',
        type: 'pie',
        radius: ['99%', '100%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
-        itemStyle: {
-          borderWidth: 2
-        },
        emphasis: {
          scale: false
        },
@@ -189,13 +187,17 @@ const handelBing1 = () => {
          {value: 48, name: '1'},
          {value: 1, name: '1'},
          {value: 48, name: '1'}
-        ]
+        ],
+        itemStyle: {
+          color: 'rgba(1, 162, 237, 1)',
+        },
+        barWidth: 2
      },
      {
        name: '2',
        type: 'pie',
        radius: ['75%', '95%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
@@ -206,15 +208,18 @@ const handelBing1 = () => {
          scale: false
        },
        data: [
+          {value: 735, name: 'Direct', itemStyle: {color: "rgb(255,217,0)"}},
          {value: 1048, name: 'Search Engine'},
-          {value: 735, name: 'Direct'}
+        ],
-        ]
+        itemStyle: {
+          color: 'rgba(1, 162, 237, .5)',
+        },
      },
      {
        name: '3',
        type: 'pie',
        radius: ['55%', '70%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: true,
          position: 'center',
@@ -227,15 +232,18 @@ const handelBing1 = () => {
        startAngle: 180,
        endAngle: 360,
        data: [
-          {value: 1048, name: '2025'},
+          {value: 1048, name: '2025', itemStyle: {color: "rgba(240, 255, 0, .5)"}},
          {value: 735, name: '2025'}
-        ]
+        ],
+        itemStyle: {
+          color: 'rgba(1, 162, 237, .5)',
+        },
      },
      {
        name: '4',
        type: 'pie',
        radius: ['38%', '50%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
@@ -245,7 +253,18 @@ const handelBing1 = () => {
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
-        data: [{value: 1048, name: ''}]
+        data: [{value: 1048, name: ''}],
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+            colorStops: [
+              {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
+              {offset: 1, color: 'rgba(16, 123, 184, 1)'}  // 底部颜色
+            ]
+          },
+        },
+        barWidth: '40%'
      }
    ]
  }
@@ -265,7 +284,7 @@ const handelBing2 = () => {
        name: '1',
        type: 'pie',
        radius: ['99%', '100%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
@@ -287,7 +306,7 @@ const handelBing2 = () => {
        name: '2',
        type: 'pie',
        radius: ['75%', '95%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
@@ -306,7 +325,7 @@ const handelBing2 = () => {
        name: '3',
        type: 'pie',
        radius: ['55%', '70%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: true,
          position: 'center',
@@ -341,7 +360,7 @@ const handelBing3 = () => {
        name: '1',
        type: 'pie',
        radius: ['99%', '100%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
@@ -363,7 +382,7 @@ const handelBing3 = () => {
        name: '2',
        type: 'pie',
        radius: ['75%', '95%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: false
        },
@@ -382,7 +401,7 @@ const handelBing3 = () => {
        name: '3',
        type: 'pie',
        radius: ['55%', '70%'],
-        center: ['50%', '70%'],
+        center: ['50%', '60%'],
        label: {
          show: true,
          position: 'center',
@@ -422,31 +441,62 @@ const handelZhu1 = () => {
      },
    },
    grid: {
-      left: '3%',
+      left: '0%',
-      right: '4%',
+      right: '0%',
-      bottom: '3%',
+      bottom: '1%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+            width: 2,
+            type: 'solid'
+          }
+        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位(万)',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+            width: 2,
+            type: 'solid'
+          }
+        },
      }
    ],
    series: [
      {
        name: '2025年',
        type: 'bar',
+        barGap: 0,
        emphasis: {
          focus: 'series'
        },
-        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
+        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+            colorStops: [
+              {offset: 0, color: 'rgba(242, 196, 0, 1)'}, // 顶部颜色
+              {offset: 1, color: 'rgba(153, 101, 0, 1)'}  // 底部颜色
+            ]
+          },
+          borderColor: 'rgba(240, 255, 0, 1)',
+          borderWidth: 1
+        },
+        barWidth: '35%',
+        borderColor: 'rgba(240, 255, 0, 1)'
      },
      {
        name: '2024年',
@@ -454,7 +504,20 @@ const handelZhu1 = () => {
        emphasis: {
          focus: 'series'
        },
-        data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
+        data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+            colorStops: [
+              {offset: 0, color: 'rgba(242, 196, 0, .5)'}, // 顶部颜色
+              {offset: 1, color: 'rgba(153, 101, 0, .5)'}  // 底部颜色
+            ]
+          },
+          borderColor: 'rgba(240, 255, 0, 1)',
+          borderWidth: 1
+        },
+        barWidth: '35%',
      },
    ]
  }
@@ -691,6 +754,23 @@ function autoHover(myChart, option, index, time) {
  .father {
    position: relative;
+  }
+  .dong {
+    position: relative;
+    &::after {
+      content: '';
+      width: 40%;
+      height: 40%;
+      background: url("@/assets/img/line2.png") no-repeat;
+      background-size: contain;
+      position: absolute;
+      top: -25%;
+      left: 0;
+      animation: movelr 4s ease-in infinite;
+    }
  }
  .top {
@@ -707,6 +787,7 @@ function autoHover(myChart, option, index, time) {
      width: calc(140 * 100vw / 1920);
      height: calc(210 * 100vh / 1920);
      .titleTop {
        text-align: center;
        font-family: PingFang SC, serif;
@@ -802,6 +883,7 @@ function autoHover(myChart, option, index, time) {
    position: relative;
    overflow: hidden;
    .bing {
      text-align: center;
@@ -826,8 +908,8 @@ function autoHover(myChart, option, index, time) {
      .bingBottom {
        position: absolute;
-        z-index: 99;
+        z-index: 9;
-        bottom: 0;
+        bottom: 4%;
        left: 0;
        width: 30%;
@@ -842,4 +924,15 @@ function autoHover(myChart, option, index, time) {
  }
 }
+@keyframes movelr {
+  0% {
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    left: calc(220 * 100vw / 1920);
+    opacity: 0;
+  }
+}
 </style>