太惊艳了!这些都是Echarts的杰作!

<div style="display:none" class="panel line2_a">
    <h2> 报告厅预约统计 </h2>
    <div class="chart" style="height: 2.8rem; margin-top: 0.15rem; left: 0.55rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <div style="position: relative; width: 0px; height: 218px; padding: 0px; margin: 0px; border-width: 0px;">
            <canvas data-zr-dom-id="zr_0" width="0" height="218" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 218px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
        </div>
    </div>
    <div class="panel-footer"></div>
</div>
<div class="panel line2_b">
    <h2> 困难认定学院统计 </h2>
    <div class="chart" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <div style="position: relative; width: 271px; height: 234px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
            <canvas data-zr-dom-id="zr_0" width="271" height="234" style="position: absolute; left: 0px; top: 0px; width: 271px; height: 234px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
        </div>
    </div>
    <div class="panel-footer"></div>
</div>
<div class="panel line1_f">
    <h2> 请假审批完成率 </h2>
    <div class="chart" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <div style="position: relative; width: 271px; height: 234px; padding: 0px; margin: 0px; border-width: 0px;">
            <canvas data-zr-dom-id="zr_0" width="271" height="234" style="position: absolute; left: 0px; top: 0px; width: 271px; height: 234px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
        </div>
    </div>
    <div class="panel-footer"></div>
</div>
<div style="display:none" class="panel line2_c">
    <h2> </h2>
    <div class="chart" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;">
        <div style="position: relative; width: 0px; height: 234px; padding: 0px; margin: 0px; border-width: 0px;">
            <canvas data-zr-dom-id="zr_0" width="0" height="234" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 234px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
        </div>
        <div class=""></div>
    </div>
    <div class="panel-footer"></div>
</div>
</div>

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
    background: url("./img/bg.jpg") no-repeat #000;
    background-size: cover;
    /* 行高是字体1.15倍 */
    line-height: 1.15;
}
header {
    position: relative;
    height: 1.25rem;
    background: url("./img/head_bg.png")no-repeat top center;
    background-size: 100% 100%;
}
header h1 {
    font-size: 0.3rem;
    color: #00ccff;
    text-align: center;
    line-height: 1.2rem;
    margin-left: 1.8625rem;
}
header .menu {
    position: absolute;
    top: 0.1875rem;
    left: 5.7875rem;
    font-size: 0.2rem;
}
header .menu a.selected {
    background: url("./img/menu.png") no-repeat;
    background-position: 0.125rem 0.1875rem;
    background-size: 1.475rem 0.4125rem;
}
header .menu :hover {
    background: url("./img/menu.png")no-repeat;
    background-position: 0.125rem 0.1875rem;
    background-size: 1.475rem 0.4125rem;
}