在篩選條件修改后，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()，這樣保證在待更新數據不全時，不會和現有數據重疊的問題

<template> <div class="" :id="id" :style="wrapStyle"></div> </template> <script>const chart = echarts.init(document.getElementById(this.id))chart.clear() //清除舊數據chart.resize({width: this.width,height: this.height})// 繪制圖表chart.setOption(this.chartOpts()) // 更新數據 </script>

clear() 的官方文檔解釋

echartsInstance. clear
any
清空當前實例，會移除實例中所有的組件和圖表。

總結

以上是生活随笔為你收集整理的vue 动态设置 echarts 画布大小 更新图表数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。