1. 引入 vue-count-to

loulijun2021

2023-01-06 14f296180e5cc2979feb746e5fe9371b89fa7ab0

1. 引入 vue-count-to

 package.json

@@ -30,6 +30,7 @@
    "qrcode": "^1.5.0",
    "qrcodejs2": "0.0.2",
    "vue": "2.6.10",
    "vue-count-to": "^1.0.13",
    "vue-easy-print": "0.0.8",
    "vue-print-nb": "^1.7.5",
    "vue-router": "3.0.6",

 src/views/xtsy/index.vue

@@ -11,12 +11,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日登录</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop01" class="barTop" style="width: 100%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日登录</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop02" class="barTop" />
            </div>
@@ -29,12 +33,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop03" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop04" class="barTop" />
            </div>
@@ -47,12 +55,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop05" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop06" class="barTop" />
            </div>
@@ -65,12 +77,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop07" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop08" class="barTop" />
            </div>
@@ -107,9 +123,11 @@

<script>
import { bar01, barTop, line01, loadEcharts } from '@/utils/myEcharts'
import countTo from 'vue-count-to'

export default {
  name: 'Index',
  components: { countTo },
  data() {
    return {
      isIpad: false,