近日在小破站看到的项目，觉得有趣，便尝试动手实操，实现脑图如下，仅以此项目向逆行者表以最崇高的敬意。
引言
想要得到一块好看的可视化大屏，在此之前就需要做好关于版面划分的工作。笔者的预想效果（及项目的最终形态应该为）：
想要得到一块这样的版面，需要把界面分为6个版面（除标题）：
- 左上总量图
- 左下增量图
- 中上数值图
- 中下疫情地图
- 右上柱状图
- 右下词云图
这里使用的划分方式为使用绝对定位划分板块。
绝对定位
语法格式
#tit{
color:FFFFFF;/*设置字体*/
position:absolute;/*绝对定位*/
height:..;
width:..;
left:..;
top:..;
/*居中分布*/
display:flex;
align-items:center;
justify-content:center;
}
设计
这里对于页面的设计，可以继续使用python的pycharm编辑器，这里笔者换用的工具是HBulider X。
- 设计页面CSS格式的编辑
#title {
position: absolute;
width: 40%;
height: 10%;
top: 0;
left: 30%;
/* background: #666666; */
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#tim {
position: absolute;
/* width: 30%; */
height: 10%;
right: 2%;
top: 5%;
color: #FFFFFF;
font-size: 16px;
}
#c1 {
position: absolute;
width: 40%;
height: 25%;
top: 10%;
left: 30%;
color: white
/* background: #777777; */
}
.num {
width: 25%;
float: left;
display: flex;
align-items: center;
justify-content: center;
color: gold;
font-size: 20px;
/*margin-top: 20px;*/
}
.txt {
width: 25%;
float: left;
font-family: "幼圆";
display: flex;
align-items: center;
justify-content: center;
}
.txt h2 {
margin: 0;
}
#c2 {
position: absolute;
width: 40%;
height: 65%;
top: 35%;
left: 30%;
background: #888888;
}
#l1 {
position: absolute;
width: 30%;
height: 45%;
top: 10%;
left: 0%;
background: #666666;
}
#l2 {
position: absolute;
width: 30%;
height: 45%;
top: 55%;
left: 0%;
background: #777;
}
#r1 {
position: absolute;
width: 30%;
height: 45%;
top: 10%;
right: 0%;
background: #666666;
}
#r2 {
position: absolute;
width: 30%;
height: 45%;
top: 55%;
right: 0%;
background: #777;
}
- html设计：
</head>
<body>
<div id="title">全国疫情监控</div>
<div id="tim">我是时间</div>
<div id="l1">我是左1</div>
<div id="l2">我是左2</div>
<div id="c1">我是中1</div>
<div id="c2">我是中2</div>
<div id="r1">我是右1</div>
<div id="r2">我是右2</div>
</body>
</html>
- 设计效果：
接下来笔者需要做的便是把需要的图像构思到其中去了。
小结
以上所作皆为边学边用，其中不足望读者多多指正。同时仅以此项目想疫情的逆行战士表以最崇高的敬意。