Echatsチャートの大画面適応を実装する方法

 <div class="スクリーンアダプタ">
 </div>
 
 .スクリーンアダプタ{
  幅：100vw;
  最小高さ: 100%;
  最大高さ: 100vh;
  オーバーフロー: 非表示;
  背景: #0c1a3c;
}

<div class="スクリーンアダプタ">
    <div class="content-wrap" :style="style">
      <スロット></スロット>
    </div>
</div>
小道具: {
    w: { // 設計図サイズ幅 type: Number,
      デフォルト: 1600
    },
    h: { // 設計図サイズ高さ type: Number,
      デフォルト: 900
    }
},
データ （） {
    戻る {
      スタイル: {
        幅: this.w + 'px',
        高さ: this.h + 'px',
        transform: 'scale(1) translate(-50%, -50%)' // デフォルトではスケーリングなし、垂直および水平の中央揃え}
    }
}
  
.content-wrap {
  変換の原点: 0 0;
  位置: 絶対;
  上位: 50%;
  左: 50%;
}

マウントされた（）{
    this.setScale()
    this.onresize = this.debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
},
破棄前() {
    window.removeEventListener('resize', this.onresize)
},
 メソッド: {
    // デバウンス (fn, t) {
      定数遅延 = t || 500
      タイマーを鳴らす
      関数を返す（）{
        const args = 引数
        if (タイマー) {
          タイムアウトをクリア(タイマー)
        }
        const コンテキスト = this
        タイマー = setTimeout(() => {
          タイマー = null
          fn.apply(コンテキスト、引数)
        }、 遅れ）
      }
    },
    // スケーリング比率を取得する getScale () {
      定数 w = window.innerWidth / this.w
      定数 h = window.innerHeight / this.h
      w < h ? w : h を返す
    },
    // スケーリング比率を設定する setScale () {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
    }
  }

// スクリーンアダプタ.vue
<テンプレート>
  <div class="スクリーンアダプタ">
    <div class="content-wrap" :style="style">
      <スロット></スロット>
    </div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  小道具: {
    w: {
      タイプ: 数値、
      デフォルト: 1600
    },
    時間: {
      タイプ: 数値、
      デフォルト: 900
    }
  },
  データ （） {
    戻る {
      スタイル: {
        幅: this.w + 'px',
        高さ: this.h + 'px',
        変換: 'スケール(1) 変換(-50%, -50%)'
      }
    }
  },
  マウントされた（）{
    this.setScale()
    this.onresize = this.Debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
  },
  破棄前() {
    window.removeEventListener('resize', this.onresize)
  },
  メソッド: {
    デバウンス (fn, t) {
      定数遅延 = t || 500
      タイマーを鳴らす
      関数を返す（）{
        const args = 引数
        if (タイマー) {
          タイムアウトをクリア(タイマー)
        }
        const コンテキスト = this
        タイマー = setTimeout(() => {
          タイマー = null
          fn.apply(コンテキスト、引数)
        }、 遅れ）
      }
    },
    スケールを取得する() {
      定数 w = window.innerWidth / this.w
      定数 h = window.innerHeight / this.h
      w < h ? w : h を返す
    },
    スケールを設定する() {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
    }
  }
}
</スクリプト>
<スタイル>
.スクリーンアダプタ{
  幅: 100%;
  最小高さ: 100vh;
  最大高さ: 100vh;
  オーバーフロー: 非表示;
  背景: #0c1a3c;
}
.content-wrap {
  変換の原点: 0 0;
  位置: 絶対;
  上位: 50%;
  左: 50%;
}
</スタイル>