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

已于 2023-07-02 14:29:21 修改
阅读量3.7k 收藏 32
点赞数 7
分类专栏： 可视化大屏 文章标签： 前端 css javascript
于 2023-06-12 10:02:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pblh123/article/details/131162656
版权
该文详细介绍了如何创建一个可视化的项目，包括文件夹结构创建、素材导入、CSS初始化、HTML页面布局、头部和主体部分的设计，以及图表内容模块的设定，涉及到CSS样式和Echarts图表的使用。文章提供了从基础设置到复杂布局的逐步指导。
摘要由CSDN通过智能技术生成

创建可视化子项目结构

一、需求

  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文库

pblh123
关注
专栏目录
大屏项目开发
qt的博客
08-03 1802
vue 大屏项目实现方式
不到100行Python代码教你做出精美炫酷的可视化大屏
weixin_43373042的博客
12-15 1458
“碳达峰、碳中和”是2021年政府在不断强调与非常重视的事儿，那什么是“碳达峰”、什么又是“碳中和”呢？这里小编来为大家科普一下，所谓的“碳达峰”指的是在某一时间点，二氧化碳的排放不再达到...
HTML+CSS+JS数据可视化大屏平台模板实例28-智慧网络监测通用模板
03-25
HTML+CSS+JS数据可视化大屏平台模板实例28-智慧网络监测通用模板
HTML+CSS+JS数据可视化大屏平台模板实例1
03-25
HTML+CSS+JS数据可视化大屏平台模板实例1
无需编程，轻松创建H5页面：详细指南及工具推荐
最新发布
Mr_Zhangyuge的博客
08-16 3684
在现代网页设计中，创建美观且功能完善的H5页面已不再是编程专家的专属领域。许多可视化工具使得即使没有编程知识的用户也能轻松设计和发布网页。本文将详细介绍几款流行的H5可视化页面配置工具，并提供具体的操作步骤，帮助新手用户轻松上手网页设计。
关于可视化大屏布局快速搭建
xiaowanxuez的博客
04-21 780
关于基础的可视化大屏简单搭建，此布局由HTML+css的基础：flex弹性盒子进行布局，进行视窗自适应
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
dreamweaver网页设计
11-09 550
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
大屏可视化之适配和布局
阿嚏乱码的地方
06-30 5324
前言 在做可视化大屏的时候，我们首先要保证UI图的比例不变，例如16:9的UI图，但大屏的比例可能是2:1，很多时候大屏的比例往往很少能与UI图的比例一模一样的，这个时候我们就要利用公式换算来适配大屏。 例如16:9的UI图： 适配大屏 当页面首次加载时，判断视口的宽高，如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽，实际的显示宽度应该等于视口的高度*16/9。 如果视口的宽/高 < 16/9 则说明视口高度比设计图高，实际的显示宽度应该等于视口的宽度，显示高度应等
2 数据可视化大屏 - 布局
YYDataV的博客
03-09 8736
目前大屏做了好多个，详细案例参考： YYDatav的数据可视化《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客❤️数据可视化❤️：基于 Echarts + Vue 实现的大屏范例【14】_小魔怪的博客-CSDN博客_echarts数据可视化❤️数据可视化❤️：基于 Echarts + Python 实现的大屏范例【13】国庆黄金周旅游监测㙍㙍㙍来了~_小魔怪的博客-CSDN博客❤️数据可视化❤️：基于 Echarts + Python 实现的大屏范例【12】
大屏可视化开发
sophia
08-22 1498
大屏可视化开发必备要素
html+ECharts大数据可视化大屏html模板.zip
03-30
在大数据可视化大屏中，ECharts是关键组件，用于将复杂的数据转化为直观、动态的图表，帮助用户快速理解数据趋势和模式。ECharts支持响应式设计，能适应不同的屏幕尺寸，非常适合用于构建大屏展示系统。 数据可视化...
数据可视化大屏的css背景+边框+demo
12-26
7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css，非常酷炫，开箱即用，做大数据的可以使用哦
一个基于Vue3的可视化监控大屏项目.zip
02-19
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
可视化大屏素材.zip
06-16
2. **大屏设计元素**：一个成功的可视化大屏通常包含多个设计元素，如色彩搭配、字体选择、图表布局、交互设计等。色彩应符合视觉审美，同时能突出重点；字体清晰易读，大小适中；布局合理，保证信息层次分明；交互...
基于Vue.js与ECharts的 数据可视化大屏源码
03-25
项目概述：本源码是基于Vue.js与ECharts技术实现的数据可视化大屏展示。项目主要以Vue为开发语言，辅以JavaScript、CSS和HTML技术进行页面构建与样式设计。 文件结构：项目包含28个文件，其中Vue组件文件11个，...
基于Echarts的可视化大屏理工云.rar
04-03
总的来说，"基于Echarts的可视化大屏理工云"项目涵盖了前端开发中的多个重要领域，从数据可视化到网页布局，再到交互设计，都是提升数据展示质量和用户体验的关键点。通过学习和实践这个项目，开发者能够深化对...
大屏设计器开发 - 项目搭建
DTCloud
04-03 179
大屏设计器项目开发纪实之项目搭建篇。
学会可视化大屏布局技巧，让领导都赞不绝口
派可数据的博客
08-02 1590
自打2020年数据成为继土地、劳动力、资本和技术之后的第五大生产要素，数据就开始以火箭般的速度呈现了爆炸式的增长态势，相关的数据安全、数据要素、数据交易市场、数据制度等以数据为基础的各种政策开始大力推动数据价值以及数据资产的发展，也明确了数据战略发展资源的地位。可视化大屏与PC、移动端的数据可视化实现过程中，最大的不同就出现在页面布局的阶段，在这个阶段，PC数据可视化的特点是比较灵活、可以在长度上进行拉长、通过滑动进行页面布局，移动端则因为页面尺寸较小，更多呈现的是企业关键指标以及异常数据监控等。...
人人都可配置的大屏可视化
樊小书生
01-30 1172
大屏主要是为了展示数据和酷炫的效果，布局大部分是9宫格，或者在9宫格上做的延伸，现在介绍下 泛积木-低代码 提供的大屏可视化配置。首先查看效果展示。创建页面之后，点击进入编辑页面，在可视化编辑器左侧组件往下翻，找到自定义组件中的，将 大屏布局组件 拖入页面，可以看到下面的成果：拖入的 大屏布局组件 将使用基础配置，并且已经自带了缩放容器组件。
Python数据可视化大屏开发完全指南
- 需要使用Python编程语言及相关库（如pyecharts、pymysql、BeautifulSoup）来构建数据可视化大屏。 - Anaconda和PyCharm是两个常用的Python开发环境，Navicat Premium是数据库管理工具。 - Pyecharts提供了丰富的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值