.echart-component {
  width: 690rpx;
  height: 320rpx;
  margin: 28rpx auto 150rpx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 35rpx 25rpx 25rpx 35rpx;
  box-sizing: border-box;
  position: relative;

  .fullscreen {
    position: fixed;
    top: 450rpx;
    left: -450rpx;
    right: 0;
    bottom: 0;
    width: 100vh;
    height: 100vw;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
    transform: rotate(90deg);
    // animation: rotate 0s linear;
  }

  @keyframes echartRotate {
    from {
      width: 690rpx;
      height: 320rpx;
      transform: rotate(0deg);
    }
    to {
      width: 100vh;
      height: 100vw;
      transform: rotate(0deg);
    }
  }

  .box_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 690rpx;
    height: 320rpx;
    border-radius: 30rpx;
    background-color: #fff;
    .power {
      margin: 34rpx 0 28rpx 28rpx;
      font-family: PingFang-SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #cccccc;
    }
    .full {
      width: 24rpx;
      height: 24rpx;
      position: absolute;
      top: 32rpx;
      right: 26rpx;
      z-index: 2;
    }
    .line {
      margin: 0 0 6rpx 35rpx;
      font-family: PingFang-SC;
      font-size: 14rpx;
      color: #cccccc;
      display: flex;
      position: relative;
      height: 18rpx;
      .bottom_line {
        // border-bottom: 1rpx #ccc dashed;
        width: 550rpx;
        margin-left: 20rpx;
        position: absolute;
        bottom: -6rpx;
        right: 74rpx;
        height: 4rpx;
        color: #fff;
      }
    }

    .time {
      position: absolute;
      bottom: 22rpx;
      right: 24rpx;
      font-family: PingFang-SC;
      font-size: 18rpx;
      color: #cccccc;
    }
  }
}

page {
  background: #f8f8f8;
  background: #f3f3f3;
}
