更新代码

src/components/MyComponents/Pie3D.vue

@@ -0,0 +1,109 @@
+<template>
+  <div ref="chartRef" :style="{ width: '100%', height: '400px' }"></div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import 'echarts-gl'
+
+export default defineComponent({
+  name: 'Pie3D',
+  setup() {
+    const chartRef = ref(null)
+    let chart = null
+
+    const initChart = () => {
+      if (!chartRef.value) return
+
+      chart = echarts.init(chartRef.value)
+      const option = {
+        backgroundColor: '#1a213c',
+        tooltip: {
+          formatter: '{b}: {c} ({d}%)',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: '#1a213c',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          orient: 'vertical',
+          right: '5%',
+          top: 'center',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: function(name) {
+            const data = option.series[0].data
+            const total = data.reduce((sum, item) => sum + item.value, 0)
+            const target = data.find(item => item.name === name)
+            const percentage = ((target.value / total) * 100).toFixed(0)
+            return `${name}  ${target.value}`
+          }
+        },
+        series: [{
+          type: 'pie',
+          radius: ['30%', '55%'],
+          center: ['40%', '50%'],
+          roseType: false,
+          zlevel: 10,
+          startAngle: 35,
+          selectedMode: 'single',
+          selectedOffset: 10,
+          data: [
+            { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
+            { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
+            { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
+            { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
+          ],
+          label: {
+            show: true,
+            formatter: '{d}%',
+            color: '#fff',
+            position: 'outside',
+            fontSize: 14,
+            fontWeight: 'bold'
+          },
+          emphasis: {
+            focus: 'self',
+            scaleSize: 10,
+            itemStyle: {
+              shadowBlur: 20,
+              shadowOffsetX: 5,
+              shadowOffsetY: 5,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          },
+          itemStyle: {
+            borderRadius: 4,
+            borderColor: '#1a213c',
+            borderWidth: 2
+          },
+          animationType: 'scale',
+          animationEasing: 'elasticOut',
+          animationDelay: function (idx) {
+            return Math.random() * 200;
+          }
+        }]
+      }
+
+      chart.setOption(option)
+    }
+
+    onMounted(() => {
+      initChart()
+      window.addEventListener('resize', () => {
+        chart && chart.resize()
+      })
+    })
+
+    return {
+      chartRef
+    }
+  }
+})
+</script>
+
+<style scoped>
+</style>

src/components/statis.vue

@@ -0,0 +1,94 @@
+
+<template>
+  <ul class="fp-box">
+    <!-- 默认进来是7位，超过自动加 -->
+    <li ref="lis" v-for="i in countStr.length > 5 ? countStr.length : 5" :key="i" :class="bg">
+      <!-- 每列中的10行数字 -->
+      <span v-for="num in 10" :key="num">
+        <span class="num-wrap">{{ num - 1 }}</span>
+      </span>
+    </li>
+  </ul>
+</template>
+<script setup>
+import { onMounted, ref, watch } from "vue";
+const props = defineProps({
+  count: Number,
+  len: {
+    type: Number,
+    default: 7
+  },
+  bg: String
+});
+const lis = ref();
+const list = ref([]);
+const countStr = ref(""); // 需要展示的数字
+const numberArr = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); // 固定每列中的19行数字
+const numStr = ref(""); // 需要展示的数字字符串
+const numArr = ref([0, 0, 0, 0, 0, 0, 0]); // 默认展示7个数字数组
+watch(
+  () => props.count,
+  (val) => {
+    let str = val.toString();
+    let num = 0;
+    if (str.length < props.len) num = props.len - str.length;
+    for (let i = 0; i < num; i++) {
+      str = "0" + str;
+    }
+    countStr.value = str;
+    initNumCard();
+  },
+  { immediate: true, deep: true }
+);
+onMounted(() => {
+  initNumCard();
+});
+function initNumCard() {
+  numStr.value = countStr.value;
+  numArr.value = numStr.value.split("");
+  const numArrlen = numArr.value.length;
+  // 展示数字的处理，不够7位前面补0
+  // 默认进来是7位，超过自动加
+  for (
+    let i = 0;
+    i < (countStr.value.length > 5 ? countStr.value.length : 5) - numArrlen;
+    i++
+  ) {
+    numArr.value.unshift(0);
+  }
+  if (lis.value) {
+    lis.value.forEach((item, index) => {
+      const ty = numArr.value[index];
+      item.style.transform = `translateY(-${ty * 32}px)`; // 滚动数字(li标签)
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fp-box {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  li {
+    width: 26px;
+    height: 32px;
+    flex-direction: column;
+    transition: transform 1s ease-in-out;
+    & > span {
+      text-align: center;
+      font-size: 20px;
+      color: #ffffff;
+      display: flex;
+      display: inline-block;
+      width: 20px;
+      height: 32px;
+      line-height: 25px; 
+      float: left;
+      .num-wrap {
+        font-family: "DigifaceWide";
+      }
+    }
+  }
+}
+</style>