vue3 可视化数据大屏 智慧书店大屏
运行环境
nodejs 16
开发框架
vue3 vite js
分辨率
1920*1080
效果截图
动态效果
书籍价格区间分布
使用柱状图展示书籍价格区间分布
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>
演示地址
点击阅读原文进行查看
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
