项目最终效果图：

此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！
使用echarts技术做的可视图，此外其项目包含的技术有html、css、js、jquerry、ajax、websocket、koa等。
此项目将前后端分离。

文章目录

界面布局
- 基础设置body
- header布局
- mainbox 主题设置
- mainbox面板模板
- panel内部块模板布局
- 中央布局
- - no模块布局
  - map模块布局
- 屏幕约束
- 布局html代码
- 布局css代码

界面布局

界面采用css3的Flex布局

为了使代码更为整洁，我们将布局全部放在css中。
在index.html中引用index.css文件

基础设置body

在css中background属性设置背景图
line-height属性表示行高，设置为1.15
溢出隐藏overflow:hidden

header布局

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

得到图为所示：

获取当前时间代码：

<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;t = setTimeout(time, 1000); //设定定时器，循环运行}
</script>

mainbox 主题设置

设置一个内边距距上下左右10px

column列容器，分为三列：占比：3:5:3

CSS代码：

body{}
.mainbox {display: flex;min-width: 1024px;/*最小宽度*/max-width: 1920px;/*最大宽度*/margin: 0 auto;padding: 0.125rem 0.125rem 0;
}
.mainbox .column {flex: 3;
}
.mainbox .column:nth-child(2) {flex: 5;margin: 0 0.125rem 0.1875rem;overflow: hidden;
}

mainbox面板模板

高度为 310px
border边框属性：border-width border-style border-color
即：1px solid（实线） rgba(25, 186, 139, 0.17)
加入line.jpg 背景图片
padding为上为 0 左右 15px 下为 40px
下外边距是 15px
利用panel 盒子 before 和after 制作上面两个角大小为 10px 线条为 2px solid #02a6b5
新加一个盒子before 和after 制作下侧两个角宽度高度为 10px

CSS代码：

.mainbox .panel {position: relative;height: 3.9rem;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);
}
/* 左上角转角 */
.mainbox .panel::before { position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
/* 右上角转角 */
.mainbox .panel::after {position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
/* panel下方盒子 */
.mainbox .panel .panel-footer {position: absolute;bottom: 0;left: 0;width: 100%;
}
/* 左下角转角 */
.mainbox .panel .panel-footer::before {position: absolute;left: 0;bottom: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}
/* 右下角转角 */
.mainbox .panel .panel-footer::after {position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}

panel内部块模板布局

六块布局均一样。因此套用一个模板。

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

/* panel盒子内h2标题设置 */
.mainbox .panel h2 {height: 0.5rem;color: #fff;line-height: 0.6rem;text-align: center;font-size: 0.25rem;font-weight: 400;
}
/* chart模板设置 */
.mainbox .panel .chart {height: 3.25rem;
}

中央布局

上面是no 数字模块
下面是map 地图模块

no模块布局

 /* 数字模块 no  背景颜色rgba(101, 132, 226, 0.1)  内边距15px */
.no {background: rgba(101, 132, 226, 0.1);padding: 0.1875rem;
}
/* no边框设置 */
.no .no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);
}
/* 左上转角配置 */
.no .no-hd::before {position: absolute;top: 0;left: 0;content: "";width: 30px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;
}
/*  右下转角配置 */
.no .no-hd::after {position: absolute;bottom: 0;right: 0;content: "";width: 30px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;
}
/*  no模块header部分 */
.no .no-hd ul {display: flex;
}
/* ul标签配置 li标签配置 */
.no .no-hd ul li {position: relative;flex: 1;line-height: 1rem;font-size: 0.875rem;color: #ffeb7b;text-align: center;font-family: "electronicFont";
}
/* 小竖线 */
.no .no-hd ul li::after {content: "";position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background: rgba(255, 255, 255, 0.2);
}
/* no模板下半部分 */
.no .no-bd ul {display: flex;
}
/* ul标签配置 li标签配置 */
.no .no-bd ul li {flex: 1;text-align: center;color: rgba(255, 255, 255, 0.7);font-size: 0.225rem;height: 0.5rem;line-height: 0.5rem;padding-top: 0.125rem;
}

字体配置：

/* 声明字体*/
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}

map模块布局

地图模块制作：

地图模块高度为 810px 里面包含2个盒子 chart 放图表模块球体盒子旋转1 旋转2
球体图片模块 map1 大小为 518px 要加背景图片因为要缩放100% 定位到最中央透明度 .3

.map {position: relative;height: 10.125rem;
}
.map .map1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 10.125rem;width: 100%;opacity: 0.65; /*透明度*/background-size: 100% 100%;
}
/* 放置图标模块 */
.map .chart {position: relative;top: 0;left: 0;width: 100%;height: 10.125rem;
}

屏幕约束

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {html {font-size: 42px !important;}
}
@media screen and (min-width: 1920px) {html {font-size: 80px !important;}
}

布局html代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数据可视化</title><link rel="stylesheet" href="css/index.css" />
</head><body><!-- 头部的盒子 --><header onclick="window.location.href= 'index.html';return false"><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;t = setTimeout(time, 1000); //设定定时器，循环运行}</script></header><!-- 页面主体部分 --><section class="mainbox"><div class="column"><!-- 列标签 --><div class="panel bar"><!--柱状图--><h2>毕业去向</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel radar"><!--雷达图--><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"><!-- no模块制作 --><div class="no"><div class="no-hd"><ul><li>0282</li><li>0246</li></ul></div><div class="no-bd"><ul><li>毕业总人数</li><li>就业人数</li></ul></div></div><!-- 地图模块 --><div class="map"><div class="map1" id="globe3D"></div><div class="chart"></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 pie2"><h2>Top10热门职业平均时薪</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></section><script src="js/flexible.js"></script><script src="js/echarts.min.js"></script><!-- 先引入jquery --><script src="js/jquery-3.3.1.min.js"></script><!-- 必须先引入china.js 这个文件 因为中国地图需要 --><script src="js/echarts-map-henan.js"></script><script type="text/javascript" src="js/echarts-gl.min.js"></script><script src="js/index.js"></script><script src="js/socket_service.js"></script>
</body></html></script>

布局css代码

// css 初始化
* {margin: 0;padding: 0;box-sizing: border-box;
}
li {list-style: none;
}
/* 声明字体*/
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}
body {background: url(../images/bg.jpg) no-repeat top center;line-height: 1.15;
}
header {position: relative;height: 1.25rem;background: url(../images/head_bg.png) no-repeat;background-size: 100% 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 {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;overflow: hidden;  //溢出隐藏}.panel {position: relative;height: 5.8rem;//height: 100rem;padding: 0 0.1875rem 0.5rem;  //内边距上右下左border: 1px solid rgba(25, 186, 139, 0.17);margin-bottom: 0.1875rem;background: url(../images/line\(1\).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;bottom: 0;right: 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;a {color: #fff;text-decoration: none;margin: 0 0.125rem;}}.chart {height: 3rem;}}
}
// no数字模块
.no {background: rgba(101, 132, 226, 0.1);padding: 0.1875rem;.no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);&::before {position: absolute;top: 0;left: 0;content: "";width: 30px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}&::after {position: absolute;bottom: 0;right: 0;content: "";width: 30px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;}ul {display: flex;li {position: relative;flex: 1;line-height: 1rem;font-size: 0.875rem;color: #ffeb7b;text-align: center;font-family: "electronicFont";&::after {content: "";position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background: rgba(255, 255, 255, 0.2);}}}}.no-bd {ul {display: flex;li {flex: 1;text-align: center;color: rgba(255, 255, 255, 0.7);font-size: 0.225rem;height: 0.5rem;line-height: 0.5rem;padding-top: 0.125rem;}}}
}
.map {position: relative;height: 10.125rem;.chart {position: absolute;top: 0;left: 0;// background-color: pink;width: 100%;height: 10.125rem;}
}/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {html {font-size: 42px !important;}
}
@media screen and (min-width: 1920px) {html {font-size: 80px !important;}
}

手把手教你做出数据可视化项目（一）页面布局相关推荐

手把手教你做出数据可视化项目（七）可视化图表数据动态获取及界面跳转
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 Apache Echarts简介:https://blog.csdn ...
手把手教你做出数据可视化项目（四）动态模拟航班飞行路线
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...
手把手教你做出数据可视化项目（二）可视化图表配置
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...
手把手教你做出数据可视化项目--波士顿矩阵模型
如何通过分析数据,从而找到最能赚钱的明星产品? 产品是公司盈利的重要途径,数据分析一定要知道公司的哪些产品是盈利的?哪些产品的市场占有率高?用波士顿矩阵可以分析和规划企业的产品组合- 按照销售增长率和 ...
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
独家 | 手把手教你组织数据科学项目！（附代码）
作者:kdnuggets 翻译:和中华校对:丁楠雅本文约4200字,建议阅读10分钟. 本文介绍了一个工具可以帮助迅速构建一个标准但灵活的数据科学项目结构,便于实施和分享数据科学工作. 由Driv ...
手把手教你OneNET数据可视化
文章目录前言 OneNET实现数据可视化效果一览发布项目(5.17更新) 总结前言之前介绍了Hi3861使用MQTT协议接入OneNET实现数据的上传以及命令的下发,本文主要是介绍一下如何使 ...
【手把手教你】股票可视化分析之Pyecharts（二）
01 引言 Pyechartss 是基于Echarts 的开源可视化库,可以制作非常精美的图表.公众号推文<[手把手教你]股票可视化分析之Pyecharts(一)>,以股票交易数据为例,为 ...
手把手教你做关键词匹配项目（搜索引擎）---- 第二十一天
客串:屌丝的坑人表单神器.数据库那点事儿面向对象升华:面向对象的认识----新生的初识.面向对象的番外----思想的梦游篇(1).面向对象的认识---如何找出类负载均衡:负载均衡----概念认识篇 ...

手把手教你做出数据可视化项目（一）页面布局

文章目录

界面布局

基础设置body

header布局

mainbox 主题设置

mainbox面板模板

panel内部块模板布局

中央布局

no模块布局

map模块布局

屏幕约束

布局html代码

布局css代码

手把手教你做出数据可视化项目（一）页面布局相关推荐

最新文章

热门文章