ECharts数据可视化项目【3】

mainbox 主体模块

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

下面正式开始

    <!-- 页面主体部分 -->
    <section class="mainbox"></section>
1
2

再设置一下样式

// 页面主体盒子
.mainbox{
   min-width: 1024px;
   max-width: 1920px;
   margin: 0 auto;
   padding: .125rem .125rem 0;
}
1
2
3
4
5
6
7

此时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>
1
2
3
4
5
6

.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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

但是实际结果并不是我们预想的那样

它并不是按照我们设置的中间占5分，原因是 &::nth-child(2)它的权值不够高

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

这样一来，提高它的权重，结果

然后往里面分别放内容就行。

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

公共面板模块 panel

• 高度为 310px
• 1像素的 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>
1
2
3
4
5
6
7

   .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;
    }
1
2
3
4
5
6
7
8
9

结果如下：

此时，这个边框的四个角是怎么做出来的呢？
利用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>

1
2
3
4
5
6
7
8
9
10

.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: '';
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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

柱形图 bar 模块(布局)

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

• 图标内容模块 chart 高度 240px

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

 <div class="panel bar">
                <h2>柱形图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
1
2
3
4
5

 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;
          }
1
2
3
4
5
6
7
8
9
10
11
12

结果是：

这样的图形布局我们需要3份

 <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 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>
    </section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

结果为：

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