div style=width 25; class=panel1 div class=panel-body style=margin-bottom 20px; div class=mycardchart div class=contenttitle

要按照从上到下的顺序渲染这两个g2组件，可以使用CSS的Flexbox布局。将这两个组件包裹在一个父容器中，并将父容器的display属性设置为flex，然后设置flex-direction属性为column，即可实现按照从上到下的顺序渲染。

修改代码如下：

<div style="width: 25%;" class="panel1" style="display: flex; flex-direction: column;">
    <div class="panel-body" style="margin-bottom: 20px;">
        <div class="mycardchart">
            <div class="contenttitle">
                <div>已超期设备</div>
            </div>
            <div class="contentnumber"> 
                总数:
                <span style="font-size: 22px;">123</span>
            </div>
            <app-piechartofequipments [depId]="123"></app-piechartofequipments>
        </div>
    </div>

    <div class="panel-body">
        <div class="mycardchart">
            <div class="contenttitle">
                <div>即将到期设备</div>
            </div>
            <div class="contentnumber">
                总数:
                <span style="font-size: 22px;">123</span>
            </div>
            <app-jjdqsb [depId]="123"></app-jjdqsb>
        </div>
    </div>
</div>

通过设置父容器的display属性为flex，并设置flex-direction属性为column，可以确保子元素按照从上到下的顺序进行渲染