ECharts数据可视化项目【3】_panel before_纵有千堆雪与长街

网络 02-07 482

mainbox 主体模块需要一个上左右的10px 的内边距column 列容器，分三列，占比 3：5：3

下面正式开始

<section class="mainbox"></section>

再设置一下样式

// 页面主体盒子 .mainbox{ min-width: 1024px; max-width: 1920px; margin: 0 auto; padding: .125rem .125rem 0; }

此时column 列容器，分三列，占比 3：5：3 这时我们就要使用flex布局，flex布局是给父亲加display：flex

<section class="mainbox"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </section> .mainbox{ display: flex; min-width: 1024px; max-width: 1920px; margin: 0 auto; padding: .125rem .125rem 0; background-color: pink; .column{ flex: 3; } &::nth-child(2){ flex:5; } }

但是实际结果并不是我们预想的那样它并不是按照我们设置的中间占5分，原因是 &::nth-child(2)它的权值不够高

.column:nth-child(2){ flex:5; }

这样一来，提高它的权重，结果然后往里面分别放内容就行。

对于上面这三个盒子，我们可以写一个公共样式。

公共面板模块 panel 高度为 310px1像素的 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 <section class="mainbox"> <div class="column"> <div class="panel"></div> </div> <div class="column">2</div> <div class="column">3</div> </section> .panel{ height: 3.875rem; position: relative; height: 3.875rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line.png); padding: 0 0.1875rem 0.5rem; margin-bottom: 0.1875rem; }

结果如下：此时，这个边框的四个角是怎么做出来的呢？利用panel 盒子 before 和after 制作上面两个角，新加一个盒子before 和after 制作下侧两个角

<section 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> </section> .panel{ height: 3.875rem; position: relative; height: 3.875rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line.png); padding: 0 0.1875rem 0.5rem; margin-bottom: 0.1875rem; &::before{ position: absolute; top:0; left: 0; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; content: ''; } &::after{ position: absolute; top:0; right: 0; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-right: 2px solid #02a6b5; content: ''; } .panel-footer{ position: absolute; bottom: 0; left: 0; width: 100%; &::before{ position: absolute; bottom:0; left: 0; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-left: 2px solid #02a6b5; content: ''; } &::after{ position: absolute; bottom:0; right: 0; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; content: ''; } }

接下来我们来看一下第一个柱状图是怎么完成的

柱形图 bar 模块(布局)

标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px

图标内容模块 chart 高度 240px

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

<div class="panel bar"> <h2>柱形图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> h2 { height: 0.6rem; line-height: 0.6rem; text-align: center; color: #fff; font-size: 20px; font-weight: 400; } .chart { height: 3rem; background-color: pink; }

结果是：这样的图形布局我们需要3份

结果为：接下来，我们要做的就是往里面填充图表就行。