vue大屏项目基础模板，前端驾驶舱demo，完整代码分享
夜十前端 2024-10-03 14:33:01 阅读 59
前端开发工作中，经常会遇到大屏展示项目，我每次开发大屏项目，都会基于这个模板来做，模版已经实现了基础布局，基础布局是按照flex自适应开发的，每个echarts图表也都做了自动适配。后期加上美工的图片 + 样式微调就搞定啦，如果追求快速开发，直接搬走妥妥够用。
下面直接上样式：（因为没有任何背景图 和 图片资源，加上样式就会好看很多）
大屏主页面代码：bigdata.vue
<code><template>
<div id="big-data-container" class="big-data-container">code>
<div class="head">code>
<h1>人力资源管理系统驾驶舱</h1>
</div>
<div class="data-container">code>
<div class="data-left">code>
<div class="data-left-item">code>
<div class="title">各事业部工时</div>code>
<div id="chart-left-1" style="height: calc(100% - 30px);"></div>code>
<div class="data-foot-line"></div>code>
</div>
<div class="data-left-item">code>
<div class="title">员工出勤情况</div>code>
<div id="chart-left-3" style="height: calc(100% - 30px);"></div>code>
<div class="data-foot-line"></div>code>
</div>
<div class="data-left-item">code>
<div class="title">项目工时情况</div>code>
<div id="chart-left-2" style="height: calc(100% - 30px);"></div>code>
<div class="data-foot-line"></div>code>
</div>
</div>
<div class="data-center">code>
<!-- <div class="title">中间位置</div> -->code>
<div class="center-top-num">code>
<div class="item">code>
<div class="text">集团员工人数</div>code>
<div class="num">1,046</div>code>
</div>
<div class="item">code>
<div class="text">正式员工人数</div>code>
<div class="num">966</div>code>
</div>
<div class="item">code>
<div class="text">实习员工人数</div>code>
<div class="num">84</div>code>
</div>
<div class="data-foot-line"></div>code>
</div>
<div class="center-top">code>
<div class="title">员工活跃信息</div>code>
<iview-circle :size="200" style="padding: 8px 0;"></iview-circle>code>
<div class="data-foot-line"></div>code>
</div>
<div class="title">出勤情况总计</div>code>
<div id="chart-center" class="chart-center"></div>code>
</div>
<div class="data-right">code>
<div class="data-right-item">code>
<div class="title">考勤异常走势</div>code>
<div id="chart-right-1" style="height: calc(100% - 30px);"></div>code>
<div class="data-foot-line"></div>code>
</div>
<div class="data-right-item">code>
<div class="title">员工打卡统计</div>code>
<iview-circle></iview-circle>
<div class="data-foot-line"></div>code>
</div>
<div class="data-right-item right-3">code>
<div class="title">项目工时排行榜</div>code>
<div id="chart-right-3" class="right-item">code>
<div class="item">code>
<div class="top">排名</div>code>
<div class="pro-name">项目名称</div>code>
<div class="num">工时</div>code>
<div class="num">人数</div>code>
</div>
<div class="item">code>
<div class="top top-1">code>
<span>1</span>
</div>
<div class="pro-name">人员管理系统</div>code>
<div class="num">679</div>code>
</div>
<div class="item">code>
<div class="top top-2">code>
<span>2</span>
</div>
<div class="pro-name">生产管理系统</div>code>
<div class="num">1,700</div>code>
</div>
<div class="item">code>
<div class="top top-3">code>
<span>3</span>
</div>
<div class="pro-name">智慧园区管理系统</div>code>
<div class="num">366</div>code>
</div>
</div>
<div class="boxfoot"></div>code>
</div>
</div>
</div>
</div>
</template>
<script>
var echarts = require('echarts');
import { chartLeft1, chartLeft2, chartLeft3, chartRight1 } from './bigdata/chart-options';
import IviewCircle from './bigdata/IviewCircle';
import './bigdata/layout.less';
export default {
components: {
'iview-circle': IviewCircle
},
data() {
return {};
},
mounted() {
var $chartLeft1 = echarts.init(document.getElementById('chart-left-1'));
$chartLeft1.setOption(chartLeft1);
var $chartLeft2 = echarts.init(document.getElementById('chart-left-2'));
$chartLeft2.setOption(chartLeft2);
var $chartLeft3 = echarts.init(document.getElementById('chart-left-3'));
$chartLeft3.setOption(chartLeft3);
var $chartCenter = echarts.init(document.getElementById('chart-center'));
$chartCenter.setOption(chartRight1);
var $chartRight1 = echarts.init(document.getElementById('chart-right-1'));
$chartRight1.setOption(chartRight1);
}
};
</script>
<style scoped>
/* .chart-center {
display: flex;
border: 1px solid #0000ff;
height: 200px;
flex-direction: column;
margin-top: 20px;
}
.chart-center .item {
text-align: center;
border: 1px solid #00c1b3;
flex: 1;
} */
.right-3 {
display: flex;
flex-direction: column;
/* margin-top: 20px; */
}
.right-3 .right-item {
flex: 1;
display: flex;
flex-direction: column;
}
.right-3 .item {
text-align: left;
border-bottom: 1px solid #549069;
flex: 1;
display: flex;
padding: 5px 10px;
margin: 0 10px;
font-size: 14px;
line-height: 30px;
}
.right-3 .item:last-child {
border-bottom: 0;
}
.right-3 .item > div {
color: white;
}
.right-3 .top {
width: 60px;
position: relative;
}
.right-3 .top span {
position: absolute;
width: 20px;
line-height: 20px;
top: 5px;
text-align: center;
border-radius: 5px;
}
.right-3 .top-1 span {
background: #e80d0d;
}
.right-3 .top-2 span {
background: #00c935;
}
.right-3 .top-3 span {
background: #0083f4;
}
.right-3 .num {
width: 88px;
}
.right-3 .pro-name {
flex: 1;
}
</style>
各个关联文件：
chart-options.js
var echarts = require("echarts");
let chartLeft1 = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [
"第一事业部",
"第二事业部",
"第三事业部",
"第四事业部",
"第五事业部",
"第七事业部"
],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
}
}
],
yAxis: [
{
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
type: "bar",
data: [200, 600, 300, 900, 1500, 1200, 600],
barWidth: "35%",
itemStyle: {
normal: {
color: "#2f89cf",
opacity: 1,
barBorderRadius: 5
}
}
}
]
};
let chartLeft2 = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [
"07.01",
"07.02",
"07.03",
"07.04",
"07.05",
"07.06",
],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
}
}
],
yAxis: [
{
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
},
{
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
], series: [
{
type: "bar",
name: "销量",
data: [1200, 800, 300, 500, 560, 220],
barWidth: "25%",
itemStyle: {
normal: {
color: "#2f89cf",
opacity: 1,
barBorderRadius: 5
}
}
}, {
type: "bar",
name: "订单",
data: [1000, 750, 380, 450, 450, 120],
barWidth: "25%",
itemStyle: {
normal: {
color: "#46d000",
opacity: 1,
barBorderRadius: 5
}
}
}
]
};
let chartLeft3 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "0%",
top: "-5px",
right: "3%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
},
yAxis: {
type: 'category',
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
data: ['周一', '周二', '周三', '周四', '周五']
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
barWidth: "55%",
itemStyle: {
normal: {
color: "#2f89cf",
opacity: 1,
barBorderRadius: 5
}
},
data: [120, 302, 400, 200, 700]
}
]
};
let chartRight1 = {
title: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
legend: {
top: "0%",
icon: "roundRect",
data: ["白班人数", "夜班人数", "考勤异常"],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
toolbox: {
feature: {}
},
grid: {
left: "10",
top: "20",
right: "10",
bottom: "10",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
},
data: [
"2020.06.15",
"2020.06.16",
"2020.06.17",
"2020.06.18",
"2020.06.19",
"2020.06.20",
"2020.06.21",
"2020.06.22"
]
}
],
yAxis: [
{
type: "value",
axisTick: { show: false },
minInterval: 60,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: "白班人数",
type: "line",
smooth: true,
lineStyle: {
color: "#45d4ba",
width: 1
}, //线条的样式
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#83cddc"
},
{
offset: 1,
color: "#bfdffbb5"
}
])
},
data: [5, 22, 150, 54, 1, 230, 4, 1]
},
{
name: "夜班人数",
type: "line",
smooth: true,
lineStyle: {
color: "#04a710",
width: 1
}, //
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0cbf22"
},
{
offset: 1,
color: "#b8f7d1b5"
}
])
},
data: [10, 150, 1, 250, 20, 100, 10, 150]
},
{
name: "考勤异常",
type: "line",
lineStyle: {
color: "#0864c3",
width: 1
}, //线条的样式
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#29d7ff"
},
{
offset: 1,
color: "#34ccef85"
}
])
},
data: [100, 2, 260, 1, 200, 30, 101, 40]
}
]
};
export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }
layout.less
.big-data-container {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
background-color: #1400a8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");code>
background-attachment: fixed;
background-size: cover;
.head {
height: 75px;
/* height: 1.05rem; */
background: url(./head_bg.png) no-repeat center center;
background-size: 100% 100%;
position: relative;
z-index: 100;
}
}
.head h1 {
margin: 0;
color: #fff;
text-align: center;
/* font-size: .4rem; */
/* line-height: .8rem; */
line-height: 71px;
}
.data-container {
/* margin: 5px 15px;
height:100%; */
margin: 0px 15px;
position: absolute;
left: 0;
right: 0;
top: 76px;
bottom: 0;
}
.data-container > div {
float: left;
/* border: 1px solid white; */
height: 100%;
}
.data-center {
padding: 0 0.9rem;
width: 40%;
display: flex;
flex-direction: column;
// .center-top{
// height: 210px;
// background: red;
// }
.chart-center{
flex: 1;
}
}
.chart-center{
width: 100%;
display: flex;
// background: white;
}
.data-left,
.data-right {
width: 30%;
display: flex;
flex-direction: column;
}
.data-left-item,
.data-right-item,.center-top,.center-top-num,.chart-center {
border: 1px solid rgba(25, 186, 139, 0.17);
padding: 0 0.2rem 0.4rem 0.15rem;
background: rgba(255, 255, 255, 0.04);
background-size: 100% auto;
position: relative;
margin-bottom: 0.15rem;
z-index: 10;
}
.data-foot-line {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
.data-foot-line:before,
.data-foot-line:after {
position: absolute;
width: 10px;
height:10px;
content: "";
border-bottom: 2px solid #02a6b5;
bottom: 0;
}
.boxall:before,
.data-foot-line:before {
border-left: 2px solid #02a6b5;
left: 0;
}
.boxall:after,
.data-foot-line:after {
border-right: 2px solid #02a6b5;
right: 0;
}
.boxall:before,
.boxall:after {
position: absolute;
width: 10px;
height: 10px;
content: "";
border-top: 2px solid #02a6b5;
top: 0;
}
.data-left-item:before,
.data-right-item:before,
.center-top-num:before,
.center-top:before{
border-left: 2px solid #02a6b5;
left: 0;
position: absolute;
width: 10px;
height:10px;
content: "";
border-top: 2px solid #02a6b5;
top: 0;
}
.data-left-item:after,
.data-right-item:after,
.center-top-num:after,
.center-top:after {
border-right: 2px solid #02a6b5;
right: 0;
position: absolute;
width: 10px;
height: 10px;
content: "";
border-top: 2px solid #02a6b5;
top: 0;
}
.data-left,
.data-right {
/* display: flex; */
}
.data-left > .data-left-item,
.data-right > .data-right-item {
flex: 1;
margin-bottom: 0.9rem;
}
.data-center .title,
.data-left > .data-left-item .title,
.data-right > .data-right-item .title {
/* font-size: .2rem; */
font-size: 1rem;
padding: 7px 0;
color: #fff;
text-align: center;
/* line-height: .5rem; */
}
.data-center .chart-center{
width: 100%;
}
.center-top-num{
height: 80px;
padding-top: 7px;
margin-bottom: 0.8rem;
display: flex;
.item{
flex: 1;
text-align: center;
}
.text{
color: #fcf0d8;
font-size: 14px;
}
.num{
font-size: 34px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-weight: bold;
color: #67caca;
}
}
IviewCircle.vue
<template>
<div class="demo-Circle">code>
<div style>
<i-circle
:size="size"code>
:trail-width="4"code>
:stroke-width="5"code>
:percent="75"code>
stroke-linecap="square"code>
stroke-color="#43a3fb"code>
>
<div class="demo-Circle-custom">code>
<h1>1500</h1>
<p>昨日活跃用户数量</p>
<span>
占比
<i>{ {1500/20000}}%</i>
</span>
</div>
</i-circle>
</div>
<div style>
<i-circle
:size="size"code>
:trail-width="4"code>
:stroke-width="5"code>
:percent="75"code>
stroke-linecap="square"code>
stroke-color="#43a3fb"code>
>
<div class="demo-Circle-custom">code>
<h1>12000</h1>
<p>上月活跃用户数量</p>
<span>
占比
<i>{ {12000/150000}}%</i>
</span>
</div>
</i-circle>
</div>
</div>
</template>
<script>
export default {
props:{
size:{
type:Number,
default:150
}
}
}
</script>
<style scoped>
.demo-Circle {
display: flex;
}
.demo-Circle > div {
flex: 1;
text-align: center;
}
.demo-Circle > div:first-child{
padding-left:10%;
}
.demo-Circle > div:last-child{
padding-right:10%;
}
</style>
<style lang="less" scoped>code>
.demo-Circle-custom {
& h1 {
color:#ffffff;
font-size: 28px;
font-weight: normal;
}
& p {
color: #ece8e8;
font-size: 14px;
margin: 10px 0 15px;
}
& span {
display: block;
padding-top: 15px;
color: wheat;
font-size: 14px;
&:before {
content: "";
display: block;
width: 50px;
height: 1px;
margin: 0 auto;
background: #e0e3e6;
position: relative;
top: -15px;
}
}
& span i {
font-style: normal;
color: white;
}
}
</style>
2024-08-05 更新：
鉴于有朋友问我，<i-circle> 标签是什么，这个是项目内引用了 iview 组件库的 circle 圆环，我安装的版本： "iview": "^3.2.2"
npm安装即可使用了，但如不需要整个组件库，建议换一下其他的单独圆环插件，会比较轻量
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。