Bootstrap

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

创建可视化子项目结构

一、需求

  1. 在view模块下，创建css、font、images、js文件夹
  2. 将项目资料放到对应文件夹下

二、实现步骤

  1. 在view模块下，创建文件夹
    • css
    • font
    • images
    • js

在这里插入图片描述

将准备好的项目素材文件拷贝到相应的目录

项目素材下载地址：
链接：https://pan.baidu.com/s/12yfzZbfiUXdd9dAqxHSttg?pwd=u57r

提取码：u57r
位置： 可视化开发工具–》 项目素材.rar
将相应文件放入到view模块对应的文件夹中

在这里插入图片描述

项目配置方案

一、需求

  1. index.html 显示设计

二、实现步骤

![[Pasted image 20230217093601.png]]

在这里插入图片描述

重启idea软件后
配置

  • css
  • index.html
  • flexible.js

![[Pasted image 20230217093704.png]]

3、但是别忘记重启IDEA软件保证生效
二、css初始化
在index.less进行css初始化

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

三、在index.html文件中引入css文件

数据库可视化

四、测试引入是否成功

在index.html文件中的加入

<body>
123
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据库可视化</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
123
</body>
</html>

![[Image 23.png]]

五、引入flexible.js

1、在标签内增加

<script src="js/flexible.js"></script>

2、测试是否引入成功
![[Image 24.png]]

可视化项目头部配置

一、基础设置需求

  1. body设置背景图，缩放100%，行高1.15
    在less文件中增加代码
body{
	background:url(../images/bg.jpg) no-repeat top center;
	line-height: 1.15;
}

![[Pasted image 20230217094335.png]] ![[Pasted image 20230217094347.png]]

在这里插入图片描述

  1. 制作头部盒子
    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>  
    <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>  
<!--贵州师范大学-->  
<!--    <div class="box"></div>-->  
    <script src="js/flexible.js"></script>  
<!--    <script src="js/echarts.min.js"></script>-->  
<!--    <script src="js/jquery.js"></script>-->  
<!--&lt;!&ndash;    引入china.js是因为中国地图需要&ndash;&gt;-->  
<!--    <script src="js/china.js"></script>-->  
<!--    <script src="js/index.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;  
  }  
}

页面主体部分mainbox布局

一、需求

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

二、实现步骤

  1. 在html文件中添加代码

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

  3. 测试

  4. 在html文件中添加代码
    index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>大数据可视化</title>  
    <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>  
<!--贵州师范大学-->  
<!--    <div class="box"></div>-->  
    <script src="js/flexible.js"></script>  
<!--    <script src="js/echarts.min.js"></script>-->  
<!--    <script src="js/jquery.js"></script>-->  
<!--&lt;!&ndash;    引入china.js是因为中国地图需要&ndash;&gt;-->  
<!--    <script src="js/china.js"></script>-->  
<!--    <script src="js/index.js"></script>-->  
</body>  
</html>
  1. 在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;  
}
  1. 测试

![[Pasted image 20230217155544.png]]

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代码

  2. 在less文件中增加代码

  3. 在修改index.html代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>大数据可视化</title>  
    <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>  
    </div>    <div class="column">2</div>  
    <div class="column">3</div>  
</selection>  
<body>  
<!--贵州师范大学-->  
<!--    <div class="box"></div>-->  
    <script src="js/flexible.js"></script>  
<!--    <script src="js/echarts.min.js"></script>-->  
<!--    <script src="js/jquery.js"></script>-->  
<!--&lt;!&ndash;    引入china.js是因为中国地图需要&ndash;&gt;-->  
<!--    <script src="js/china.js"></script>-->  
<!--    <script src="js/index.js"></script>-->  
</body>  
</html>

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: "";  
  }  
}

![[Pasted image 20230217174913.png]]

制作左下角和右下角
index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>大数据可视化</title>  
    <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"><div class="panel-footer"></div></div>  
    </div>    <div class="column">2</div>  
    <div class="column">3</div>  
</selection>  
<body>  
<!--贵州师范大学-->  
<!--    <div class="box"></div>-->  
    <script src="js/flexible.js"></script>  
<!--    <script src="js/echarts.min.js"></script>-->  
<!--    <script src="js/jquery.js"></script>-->  
<!--&lt;!&ndash;    引入china.js是因为中国地图需要&ndash;&gt;-->  
<!--    <script src="js/china.js"></script>-->  
<!--    <script src="js/index.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% 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: "";  
    }  
  }  
}
  1. 测试效果如下

![[Pasted image 20230217180115.png]]

基础图形模块布局

一、需求：

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

二、代码实现

index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>大数据可视化</title>  
    <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>  
<!--贵州师范大学-->  
<!--    <div class="box"></div>-->  
    <script src="js/flexible.js"></script>  
<!--    <script src="js/echarts.min.js"></script>-->  
<!--    <script src="js/jquery.js"></script>-->  
<!--&lt;!&ndash;    引入china.js是因为中国地图需要&ndash;&gt;-->  
<!--    <script src="js/china.js"></script>-->  
<!--    <script src="js/index.js"></script>-->  
</body>  
</html>

![[Pasted image 20230217182327.png]]

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;  
  }  
}

在这里插入图片描述

  • 实现需求：图标内容模块 chart 高度 240px
    在index.html中修改代码
<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>

在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;  
  }  
}

![[Pasted image 20230217182921.png]]

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

在index.html文件中，将以下部分代码进行复制

<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>折线图-就业行业</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">2</div>  
    <div class="column">3</div>  
</selection>

在这里插入图片描述

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

大屏右边框架的搭建如下：
index.html中修改代码
修改的代码如下：

<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>折线图-就业行业</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">2</div>  
    <div class="column">  
        <div class="panel bar">  
            <h2>柱形图-就业行情</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel line">  
            <h2>折线图-就业行业</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></selection>

在这里插入图片描述

大屏基础配置中，大屏的布局方式并不唯一单一。推荐大家参考多个大屏后自定义设置大屏布局。达到最合适的展示效果。

可视化大屏项目参考链接

【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
可能是东半球最好的dagger2文章
两年外包生涯做完，感觉自己废了一半....
vue2修改了数据 页面却没有更新
杰发科技Bootloader（2）—— 基于7840的Keil配置地址
同行兄弟出去面试题的汇总 2020-7-19
【Autosar】MCAL - SPI（NXP - S32K14x）
设计模式 - Singleton pattern 单例模式
8位二进制数的原码、反码、补码以及它能表示的范围
以太网帧类型速查
基于.net8的物料管理系统
;