vue3 テーブルと echarts チャートのレスポンシブ レイアウト方法

例：表格高度动态化

---

画面の高さと幅はどちらも属性を通じて取得できwindow.innerHeight / window.innerWidth 、高さは window オブジェクトによってトリガーされたイベントの画面のスクロールに続いて計算されます。

---

1. モニター画面の高さ

1. イベントをリッスンし、高さを動的に計算します。

window.innerHeight // 获取高度

window.addEventListener('resize', ()=> { data.elmaxheight = window.innerHeight - 200; })

2. リスニング イベントをキャンセルします。

removeEventListener

window.removeEventListener('resize', ()=> { // 対応するメソッドを処理します})

2. 単一ページの読み込み

---

echarts画面サイズを変更したときの画像の応答処理。

---

	//获取dom节点
	var myChart = echarts.init(document.getElementById('main'));
	//渲染dom
	myChart.setOption({
    
    ...})
	 // 响应式
	window.addEventListener('resize', ()=> {
    
    
		myChart.resize();
	})

3. グローバルパッケージのマウント方法

---

main.jsにグローバルにマウントし、共有メソッドにカプセル化します。

---

1.main.js中間処理パッケージ

// echarts缩放方法--全局挂载
app.config.globalProperties.$echartsResize = (ref)=> {
    
    
  window.addEventListener('resize', ()=> {
    
    
    ref.resize()
  })
}

2. ページ内での使用

これはコンポーネント インスタンス にvue導入しgetCurrentInstance、を通じてgetCurrentInstance
取得する必要がありますproxy。その後、グローバルにマウントされたインスタンスを取得して使用できるようになります。

	// vue3.2中使用
	const {
    
     proxy } = getCurrentInstance()
	proxy.$echartsResize(myChart)

要約:

前への道 | 私はほとんど知識がありませんが、学ぶのは得意です。
ご質問がございましたら、メッセージを残してご相談ください。

— フォローしてください: フロントエンドで迷わないように —