vue動的echartsキャンバスサイズの設定&グラフデータの更新

フィルタ条件の変更後、echartsのグラフは動的にグラフを変更する必要があります.

echartsキャンバスサイズを動的に変更

width,heightの変更を傍受し,グラフを更新する際にresize()メソッドを用いてグラフキャンバスのサイズを更新する

const chart = echarts.init(document.getElementById(this.id)) //    
chart.resize({
  width: this.width,
  height: this.height
})  //  resize  

公式文書resize()方法
echartsInstance. resize Function(opts?:{width?:number|string,height?:number|string,silent?:boolean})=>EChartsはグラフサイズを変更し、コンテナサイズが変更された場合に手動で呼び出す必要があります.

動的更新テーブルデータ

リスニングパラメータが変更され、その後、setOption()が変更されます.setOption()の前に、clear()が必要です.これにより、更新対象のデータが不完全な場合、既存のデータと重複しないことが保証されます.

      const chart = echarts.init(document.getElementById(this.id))
      chart.clear() //     
      chart.resize({
        width: this.width,
        height: this.height
      })
      //     
      chart.setOption(this.chartOpts())  //     

clear()の公式文書の解釈
echartsInstance. clear anyは現在のインスタンスを空にし、インスタンス内のすべてのコンポーネントとグラフを削除します.