为什么我的echarts图表是从chart盒子的上半部分开始渲染的呢？

Question

为什么我的echarts图标不从底部显示呢？

<div class="column">
            <div class="panel bar">
                <h2>123</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">
                <h2></h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>

.mainbox {
    padding: .125rem .125rem 0;
    display: flex;
    .column{
        flex: 3;
        &:nth-child(2){
          flex: 5;
          margin: 0 10px 15px;
      }
    }
}

.panel {
    position: relative;
    height: 3.875rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url(../images/line\(1\).png);
    padding: 0 0.1875rem 0.5rem;
    margin-bottom: 0.1875rem;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
    .panel-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-bottom: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
    }
    h2 {
      height: .6rem;
      color: #fff;
      font-size: .25rem;
      text-align: center;
    }
    .chart {
      height: 3rem;
    }
}

let myChart = echarts.init(document.querySelector(".line .chart"));
let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
        }
    ]
};
    myChart.setOption(option);

```

Answer 1

这是你div的定位问题吧，看看div的css属性。