vue3 可视化数据大屏 智慧书店大屏

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

演示demo:vue3 可视化数据大屏 智慧书店大屏

效果截图

动态效果

书籍价格区间分布

使用柱状图展示书籍价格区间分布
20元以下
20—30元
30—40元
40—50元
50—60元
60元以上

书籍评分分布情况

使用折线图展示书籍评分情况

书籍包装类型占比

使用饼状图展示书籍包装类型占比

平装—胶订
精装
线装
套装
其他

书店基本情况

使用数字卡片展示书店基本情况

实时销售总额
今日订单总
会员总数
图书库存总量

实时借还数据动态展示

使用表格展示实时借还数据动态展示

书店名称
借书人
书籍名称
书籍类别
借阅时间
应还时间
借阅状态

读者年龄分布

使用漏斗图展示读者年龄分布

26—35岁
18—25岁
36—45岁
18岁以下
45岁以上

读者性别分布

使用饼状图展示读者性别分布

各类型图书占比分析

饼状图展示各类型图书占比分析

文学艺术
经管励志
少儿教育
科技计算机
生活休闲

各时段借阅人次统计

使用折线图展示各时间段的人数分布

热门书籍借阅排名

部分代码展示

<template>
  <div class="home">
    <bg></bg>
    <top title="智慧书店大屏" class="wow fadeInDown" data-wow-delay="0.2s"></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="item0">
          <item9></item9>
        </div>
        <div class="item2">
          <item name="实时借还数据动态展示" :duration="0.5" :delay="0.5">
            <item8></item8>
          </item>
        </div>
        <div class="item1">
          <div class="item1Inner">
            <item name="读者年龄分布" :duration="0.5" :delay="1">
              <item7></item7>
            </item>
          </div>
          <div class="item1Inner">
            <item name="读者性别分布" :duration="0.5" :delay="1">
              <item10></item10>
            </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 { onMounted } from 'vue'
import top from "./components/top/index.vue"
import item from "./components/item/index.vue"
import item1 from "./components/item1/index.vue"
import item2 from "./components/item2/index.vue"
import item3 from "./components/item3/index.vue"
import item4 from "./components/item4/index.vue"
import item5 from "./components/item5/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"
import item10 from "./components/item10/index.vue"
import bg from "@/components/bg/index.vue"
import WOW from "wow.js"

onMounted(() => {
  const wow = new WOW({})
  wow.init()
})
</script>

更多可视化大屏实例

酷炫的数据可视化大屏模板

源码下载

项目基于vue3 vite js nodejs16开发，购买代码请确保有相关开发基础

纯前端项目

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