【可视化大屏开发】2.基础项目配置及大屏布局

阿波贴吧~

已于 2024-03-18 17:22:07 修改

阅读量537

点赞数 19

分类专栏：大数据可视化大屏文章标签： spring boot 大数据 html

于 2024-03-09 18:15:46 首次发布

本文链接：https://blog.csdn.net/qq_63917380/article/details/136579884

版权

大数据可视化大屏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建项目结构

1.1 在包bigdata2023下创建bean、conf、controller、mapper、util等文件夹备用

1.2 在static目录下创建css、font、images、js等文件夹

1.3 在resources目录下创建templates目录，在项目打包前，index.html文件应该放在static下，等调试好，再移动到templates目录下

1.4 将项目资料放到对应文件夹下

2.项目配置方案

2.1 index.html显示设计

重启idea软件后
配置

css
index.html
flexible.js

2.2 css初始化

在index.less进行css初始化

// css 初始化
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

3.可视化项目头部配置

3.1 基础设计需求

1.body设置背景图，缩放100%，行高1.15
在less文件中增加代码

body{
	background:url(../images/bg.jpg) no-repeat top center;
	line-height: 1.15;
}

3.2 制作头部盒子

header布局

高度100px
背景图，容器内显示
缩放比例：100%
h1标题部分，白色，38像素，居中显示，行高为80像素
时间模块，showtime定位右侧，right为30px，行高75px 文字颜色:rgba(255,255,255,0.7),文字大小为20像素

效果如图：

index.html文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据可视化-职业分析</title>
    <!--   浏览器标题栏图标 在标题前显示ico图片-->
    <link rel="shortcut icon" href="/images/bigdata01.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<!--头部的盒子-->
<header>
    <h1>大数据可视化——职位分析项目</h1>
    <div class = "showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time,1000);  //开始运行
        function time(){
            clearTimeout(t);    //清除计时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日' + h + '时' + m + '分' + s + '秒'
        }
    </script>
</header>
<body>
<!--    <h1>大数据可视化</h1>-->
    <div class = "box"></div>
    <script src="js/flexible.js"></script>

</body>
</html>

index.less文件代码：

// css初始化  
*{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
.box{  
  width: 1rem;  
  height: 1rem;  
  background-color: pink;  
}  
  
body{  
  background:url(../images/bg.jpg) no-repeat top center;  
  line-height: 1.15;  
}  
  
//头部盒子  
header{  
  position: relative;  
  height: 1.25rem;  
  height: 80px;  
  background: url(../images/head_bg.png) no-repeat;  
  background-size: 100%;  
  h1{  
    font-size: 0.475rem;  
    color: #fff;  
    text-align: center;  
    line-height: 1rem;  
  }  
  .showTime{  
    position: absolute;  
    right: 0.375rem;  
    top: 0;  
    line-height: 0.9375rem;  
    color: rgba(255,255,255,0.7);  
    font-size: 0.25rem;  
  }  
}

4.页面主体部分mainbox布局

一、需求

需要一个上左右的10px的内边距
column列容器，分三列，占比 3:5:3

二、实现步骤

在html文件中添加代码
在less文件中，增加代码
测试
在html文件中添加代码
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据可视化-职业分析</title>
    <!--   浏览器标题栏图标 在标题前显示ico图片-->
    <link rel="shortcut icon" href="/images/bigdata01.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<!--头部的盒子-->
<header>
    <h1>大数据可视化——职位分析项目</h1>
    <div class = "showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time,1000);  //开始运行
        function time(){
            clearTimeout(t);    //清除计时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日' + h + '时' + m + '分' + s + '秒'
        }
    </script>
</header>
<selection class="mainbox">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
</selection>
<body>
<!--    <h1>大数据可视化</h1>-->
    <div class = "box"></div>
    <script src="js/flexible.js"></script>

</body>
</html>

5.在less文件中，增加代码

// css初始化  
*{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
.box{  
  width: 1rem;  
  height: 1rem;  
  background-color: pink;  
}  
  
body{  
  background:url(../images/bg.jpg) no-repeat top center;  
  line-height: 1.15;  
}  
  
//头部盒子  
header{  
  position: relative;  
  height: 1.25rem;  
  height: 80px;  
  background: url(../images/head_bg.png) no-repeat;  
  background-size: 100%;  
  h1{  
    font-size: 0.475rem;  
    color: #fff;  
    text-align: center;  
    line-height: 1rem;  
  }  
  .showTime{  
    position: absolute;  
    right: 0.375rem;  
    top: 0;  
    line-height: 0.9375rem;  
    color: rgba(255,255,255,0.7);  
    font-size: 0.25rem;  
  }  
}  
  
//页面mainbox主题布局  
.mainbox{  
  display: flex;  
  min-width: 1024px;  
  max-width: 1920px;  
  margin: 0 auto;  
  padding: 0.125rem 0.125rem 0;  
  background: aqua;  
}  
.column{  
  flex: 3;  
}  
.column:nth-child(2){  
  flex: 5;  
}

6.测试

5.panel盒子公共面板制作

一、需求

1.高度为310px
2.像素的1px solid rgba(25,186,139,0.17)边框
3.line.jpg背景图片
4.padding为上0，左右15px，下40px
5.下边距15px
6.利用panel盒子before和after制作上面两个角，大小为10px线条为2px solid #02a6b5
7.新加一个盒子before和after制作下侧两个角，宽高度10px

二、实现步骤

1.在修改index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据可视化-职业分析</title>
    <!--   浏览器标题栏图标 在标题前显示ico图片-->
    <link rel="shortcut icon" href="/images/bigdata01.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<!--头部的盒子-->
<header>
    <h1>大数据可视化——职位分析项目</h1>
    <div class = "showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time,1000);  //开始运行
        function time(){
            clearTimeout(t);    //清除计时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日' + h + '时' + m + '分' + s + '秒'
        }
    </script>
</header>
<selection class="mainbox">
    <div class="column">
        <div class = "panel bar">
            <div class = "panel-footer"></div>
        </div>
    </div>
    <div class="column">2</div>
    <div class="column">3</div>
</selection>
<body>
<!--    <h1>大数据可视化</h1>-->
    <div class = "box"></div>
    <script src="js/flexible.js"></script>

</body>
</html>

2.在less文件中增加代码

// css初始化  
*{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
.box{  
  width: 1rem;  
  height: 1rem;  
  background-color: pink;  
}  
  
body{  
  background:url(../images/bg.jpg) no-repeat top center;  
  line-height: 1.15;  
}  
  
//头部盒子  
header{  
  position: relative;  
  height: 1.25rem;  
  height: 80px;  
  background: url(../images/head_bg.png) no-repeat;  
  background-size: 100% 100%;  
}  
header h1{  
  font-size: 0.475rem;  
  color: #fff;  
  text-align: center;  
  line-height: 1rem;  
}  
header .showTime{  
  position: absolute;  
  right: 0.375rem;  
  top: 0;  
  line-height: 0.9375rem;  
  color: rgba(255,255,255,0.7);  
  font-size: 0.25rem;  
}  
  
//页面mainbox主题布局  
.mainbox{  
  display: flex;  
  min-width: 1024px;  
  max-width: 1920px;  
  margin: 0 auto;  
  padding: 0.125rem 0.125rem 0;  
}  
.column{  
  flex: 3;  
}  
.column:nth-child(2){  
  flex: 5;  
  margin: 0 0.125rem 0.1875rem;  
}  
.panel{  
  position: relative;  
  height: 3.875rem;  
  padding: 0 0.1875rem 0.5rem;  
  border: 1px solid rgba(25,186,139,0.17);  
  margin-bottom: 0.1875rem;  
  background: url(../images/line.png) rgba(255,255,255,0.03);  
  //制作左上角  
  &::before{  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 10px;  
    height: 10px;  
    border-left: 2px solid #02a6b5;  
    border-top: 2px solid #02a6b5;  
    content: "";  
  }  
  //制作右上角  
  &::after{  
    position: absolute;  
    top: 0;  
    right: 0;  
    width: 10px;  
    height: 10px;  
    border-right: 2px solid #02a6b5;  
    border-top:  2px solid #02a6b5;  
    content: "";  
  }  
  .panel-footer{  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    &::before{  
      position: absolute;  
      left: 0;  
      bottom: 0;  
      width: 10px;  
      height: 10px;  
      border-left: 2px solid #02a6b5;  
      border-bottom: 2px solid #02a6b5;  
      content: "";  
    }  
    &::after{  
      position: absolute;  
      right: 0;  
      bottom: 0;  
      width: 10px;  
      height: 10px;  
      border-right: 2px solid #02a6b5;  
      border-bottom: 2px solid #02a6b5;  
      content: "";  
    }  
  }  
}

3.测试效果

6.基础图形模块布局

一、需求：

标题模块h2高度为48px，文字颜色白色，文字大小20px
图标内容模块chart高度 240px
以上可以作为panel公共样式部分

二、代码实现

1.index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据可视化-职业分析</title>
    <!--   浏览器标题栏图标 在标题前显示ico图片-->
    <link rel="shortcut icon" href="/images/bigdata01.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<!--头部的盒子-->
<header>
    <h1>大数据可视化——职位分析项目</h1>
    <div class = "showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time,1000);  //开始运行
        function time(){
            clearTimeout(t);    //清除计时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日' + h + '时' + m + '分' + s + '秒'
        }
    </script>
</header>
<selection class="mainbox">
    <div class="column">
        <div class = "panel bar">
            <h2>柱形图-就业行情</h2>
            <div class = "panel-footer"></div>
        </div>
    </div>
    <div class="column">2</div>
    <div class="column">3</div>
</selection>
<body>
<!--    <h1>大数据可视化</h1>-->
    <div class = "box"></div>
    <script src="js/flexible.js"></script>

</body>
</html>

2.index.less中添加h2：

// css初始化  
*{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
.box{  
  width: 1rem;  
  height: 1rem;  
  background-color: pink;  
}  
  
body{  
  background:url(../images/bg.jpg) no-repeat top center;  
  line-height: 1.15;  
}  
  
//头部盒子  
header{  
  position: relative;  
  height: 1.25rem;  
  height: 80px;  
  background: url(../images/head_bg.png) no-repeat;  
  background-size: 100% 100%;  
}  
header h1{  
  font-size: 0.475rem;  
  color: #fff;  
  text-align: center;  
  line-height: 1rem;  
}  
header .showTime{  
  position: absolute;  
  right: 0.375rem;  
  top: 0;  
  line-height: 0.9375rem;  
  color: rgba(255,255,255,0.7);  
  font-size: 0.25rem;  
}  
  
//页面mainbox主题布局  
.mainbox{  
  display: flex;  
  min-width: 1024px;  
  max-width: 1920px;  
  margin: 0 auto;  
  padding: 0.125rem 0.125rem 0;  
}  
.column{  
  flex: 3;  
}  
.column:nth-child(2){  
  flex: 5;  
  margin: 0 0.125rem 0.1875rem;  
}  
.panel{  
  position: relative;  
  height: 3.875rem;  
  padding: 0 0.1875rem 0.5rem;  
  border: 1px solid rgba(25,186,139,0.17);  
  margin-bottom: 0.1875rem;  
  background: url(../images/line.png) rgba(255,255,255,0.03);  
  //制作左上角  
  &::before{  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 10px;  
    height: 10px;  
    border-left: 2px solid #02a6b5;  
    border-top: 2px solid #02a6b5;  
    content: "";  
  }  
  //制作右上角  
  &::after{  
    position: absolute;  
    top: 0;  
    right: 0;  
    width: 10px;  
    height: 10px;  
    border-right: 2px solid #02a6b5;  
    border-top:  2px solid #02a6b5;  
    content: "";  
  }  
  .panel-footer{  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    &::before{  
      position: absolute;  
      left: 0;  
      bottom: 0;  
      width: 10px;  
      height: 10px;  
      border-left: 2px solid #02a6b5;  
      border-bottom: 2px solid #02a6b5;  
      content: "";  
    }  
    &::after{  
      position: absolute;  
      right: 0;  
      bottom: 0;  
      width: 10px;  
      height: 10px;  
      border-right: 2px solid #02a6b5;  
      border-bottom: 2px solid #02a6b5;  
      content: "";  
    }  
  }  
  h2 {  
    height: 0.6rem;  
    color: #fff;  
    line-height: 0.6rem;  
    text-align: center;  
    font-size: 0.25rem;  
    font-weight: 400;  
  }  
}

3.测试效果：

实现需求：图标内容模块 chart 高度 240px
在index.html中修改代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据可视化-职业分析</title>
    <!--   浏览器标题栏图标 在标题前显示ico图片-->
    <link rel="shortcut icon" href="/images/bigdata01.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<!--头部的盒子-->
<header>
    <h1>大数据可视化——职位分析项目</h1>
    <div class = "showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time,1000);  //开始运行
        function time(){
            clearTimeout(t);    //清除计时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日' + h + '时' + m + '分' + s + '秒'
        }
    </script>
</header>
<selection class="mainbox">
    <div class="column">
        <div class = "panel bar">
            <h2>柱形图-就业行情</h2>
            <div class = "chart"></div>
            <div class = "panel-footer"></div>
        </div>
    </div>
    <div class="column">2</div>
    <div class="column">3</div>
</selection>
<body>
<!--    <h1>大数据可视化</h1>-->
    <div class = "box"></div>
    <script src="js/flexible.js"></script>

</body>
</html>

在less文件中，的panel内，增加如下代码

.panel{  
  position: relative;  
  height: 3.875rem;  
  padding: 0 0.1875rem 0.5rem;  
  border: 1px solid rgba(25,186,139,0.17);  
  margin-bottom: 0.1875rem;  
  background: url(../images/line.png) rgba(255,255,255,0.03);  
  //制作左上角  
  &::before{  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 10px;  
    height: 10px;  
    border-left: 2px solid #02a6b5;  
    border-top: 2px solid #02a6b5;  
    content: "";  
  }  
  //制作右上角  
  &::after{  
    position: absolute;  
    top: 0;  
    right: 0;  
    width: 10px;  
    height: 10px;  
    border-right: 2px solid #02a6b5;  
    border-top:  2px solid #02a6b5;  
    content: "";  
  }  
  .panel-footer{  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    &::before{  
      position: absolute;  
      left: 0;  
      bottom: 0;  
      width: 10px;  
      height: 10px;  
      border-left: 2px solid #02a6b5;  
      border-bottom: 2px solid #02a6b5;  
      content: "";  
    }  
    &::after{  
      position: absolute;  
      right: 0;  
      bottom: 0;  
      width: 10px;  
      height: 10px;  
      border-right: 2px solid #02a6b5;  
      border-bottom: 2px solid #02a6b5;  
      content: "";  
    }  
  }  
  h2 {  
    height: 0.6rem;  
    color: #fff;  
    line-height: 0.6rem;  
    text-align: center;  
    font-size: 0.25rem;  
    font-weight: 400;  
  }  
  .chart {  
    height: 3rem;  
    background-color: pink;  
  }  
}

以上可以作为panel公共样式部分

在index.html文件中，进行复制

<!--main盒子-->
<selection class = "mainbox">
<!--    左边盒子-->
    <div class="column">
        <div class="panel bar">
            <h2>柱形图-不同行业职业需求数量</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>折线图-国内外需求分析
                <a href="javascript:">2022</a>
                <a href="javascript:">2023</a>
            </h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>饼状图-饼状图-薪资分布</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>


<!--    右边盒子-->
    <div class="column">
        <div class="panel bar2">
            <h2>柱形图-热门岗位</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line2">
            <h2>折线图-岗位需求变换</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
            <h2>南丁格尔玫瑰图-就业城市</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</selection>

到这一步就完成左、右两边框架的搭建