vue3+echart5 で発生した未定義 ('type' の読み取り) のプロパティを読み取れないというピットを解決する方法

1. エラーの説明

vue3 では、データを使用して echart チャートを初期化します

export default {
  data() {
    return {
      chart: null,
      ...
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
    this.chart.setOption({...})
  },
  ...
}

ウィンドウ サイズが変更されたときは、this.chart.resize() を実行する必要があります。 チャートのサイズを動的に調整すると、エラーが発生します:

2. エラーの理由

vue3 でプロキシを使用して応答を監視します。 .chart は vue 内でレスポンシブオブジェクトに変換されるため、リサイズ時に取得できないようになります

coordSys.type

3. 解決策

公式を参照してください:

選択的に終了 ディープ リアクティブ/読み取り専用変換モードをデフォルトにし、プロキシされていない生のオブジェクトをステートチャートに埋め込みます。これらは状況に応じて柔軟に使用できます。

• 複雑なサードパーティのクラス インスタンスや Vue コンポーネント オブジェクトなど、一部の値はリアクティブであってはなりません。

• プロキシ変換をスキップすると、不変のデータ ソースを含む大きなリストをレンダリングする際のパフォーマンスが向上します。

したがって、echart をインスタンス化するときは、それを非応答として指定するだけです。

rree

以上がvue3+echart5 で発生した未定義 ('type' の読み取り) のプロパティを読み取れないというピットを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。