echartsでブラウザサイズの変更に伴いグラフのサイズも動的に変更する方法

Question

echartsでグラフを作成しているのですが、ブラウザサイズの変更に伴いグラフのサイズも動的に変更するようにしたいと考えています。
ネットで調べてもe-chartの情報がみつからなかったのですが、動的にサイズを変更させることは可能でしょうか。ご教示願います。

やりたいことは下記URLで紹介されている内容です。
https://www.petitmonte.com/javascript/chart_resize.html
http://shiru-web.com/2017/04/20/01-24/

Comments

[mar-kn]

e-chart というのは、下記のライブラリでしょうか？
サンプルを見るとやりたいとおっしゃっていることができているように見えます
https://echarts.apache.org/examples/en/editor.html?c=line-simple

[sato4000]

申し訳ありません。名前を間違えていました。
ありがとうございます。

Answer 1

お使いのグラフライブラリがEChartsのことであれば、リサイズ用の関数がありますよ。
ウィンドウサイズが変更された時に、これを呼出す形になります。
ただし、グラフを描画する時にgrid.widthやgrid.heightを指定してたら意味ないです。
（訂正）
「意味ない」はおかしいですね。
「リサイズをするときにサイズを渡す必要がある」が正しかったです。

■リサイズ
https://echarts.apache.org/en/api.html#echartsInstance.resize

Comments

[sato4000]

ご回答いただきありがとうございます。EChartsで間違いありません。
'auto'を指定すればウインドウズサイズにあった大きさに自動的に変わる認識であっていますでしょうか。
お手数おかけしますがご教示願います。

[SystemAjisai]

何も指定していなければ初期値はautoです。
私の場合はautoにしても、ウインドウのリサイズで親要素のサイズが変わった時にサイズ追従してくれませんでした。
ただ私はVue.jsを使っているので、正確にはvue-echarts-v3を使っていることになるためちょっと違うかもしれませんし、そんなに難しい修正でもないので試してみられるのが一番早いと思います。
ダメな場合は回答に書いた通りウインドウのリサイズ時に、リサイズしたいEChartsのインスタンスのrisizeを呼んでやれば変わりますよ。

[sato4000]

autoで自動でリサイズされることを確認しました。
ご回答いただきありがとうございます。