vue3 可视化数据大屏 融资担保业务数据监控中心

id

288

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:融资担保业务数据监控中心 可视化数据大屏 vue3

动态效果

效果截图

担保业务统计

数字卡片展示担保业务统计

总担保金额
担保项目数
活跃客户数
风险率

担保业务统计

饼状图展示担保业务统计

客户行业分析

柱状图展示客户行业分析

其他
金融业
信息技术
交通运输
房地产
建筑业
批发零售
制造业

风险预警

列表展示风险预警

担保期限分析

柱状图展示担保期限分析

业务趋势分析

折线图展示

担保金额
项目数量
服务企业

风险等级分布

雷达图展示风险等级分布

项目排行榜

滚动表格展示项目排行榜

地图展示担保业务地理分布

大屏数据可视化模板

数据可视化大屏模板

项目文件目录

部分代码

<template>
  <div class="home">
    <top class="wow fadeInDown" name="融资担保业务数据监控中心"></top>
    <div class="homeMain">
      <div class="homeMainl">
        <div class="item1">
          <item name="担保业务统计" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item name="担保类型分布" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item name="客户行业分析" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainc">
        <div class="item2" ref="item2Ref">
          <item7></item7>
        </div>
        <div class="item3">
          <div class="item3Inner">
            <item name="风险等级分布" :duration="0.5" :delay="0">
              <item8></item8>
            </item>
          </div>
          <div class="item3Inner">
            <item name="项目排行榜" :duration="0.5" :delay="0">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainr">
        <div class="item1">
          <item name="风险预警" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item name="担保期限分析" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item name="业务趋势分析" :duration="0.5" :delay="1">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {gsap} from 'gsap'
import top from '@/components/top/index.vue'
import WOW from "wow.js"
import item from "@/components/item/index.vue"
import item1 from './components/item1/index.vue'
import item3 from './components/item3/index.vue'
import item5 from './components/item5/index.vue'
import item4 from './components/item4/index.vue'
import item2 from './components/item2/index.vue'
import item6 from './components/item6/index.vue'
import item7 from './components/item7/index.vue'
import item8 from './components/item8/index.vue'
import item9 from './components/item9/index.vue'

// 创建 ref 引用
const item2Ref = ref(null)

// 生命周期钩子
onMounted(() => {
  const wow = new WOW({})
  wow.init()

  // GSAP 动画：从小到大的缩放效果
  if (item2Ref.value) {
    gsap.fromTo(item2Ref.value,
        {
          scale: 0,
          opacity: 0,
          transformOrigin: "center center"
        },
        {
          scale: 1,
          opacity: 1,
          duration: 0.8,
          delay: 0.5,
          ease: "back.out(1)"
        }
    )
  }
})
</script>

项目依赖

{
  "name": "rongzidanbao",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-qiniu": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "autoprefixer": "^10.4.13",
    "axios": "^1.5.1",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "mockjs": "^1.1.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

项目基于vue3+vite+js开发 nodejs 23

购买代码前请确保具备相关开发基础

本项目为纯前端大屏，无后端支持

默认数据为模拟数据，实际使用时需接入真实数据源

虚拟产品一经售出 概不退款请谅解