在篩選條件修改后，echarts的圖表需要?jiǎng)討B(tài)修改圖表。

• 動(dòng)態(tài)修改echarts 畫布大小

監(jiān)聽width，height的改變，在更新圖表時(shí)，使用resize()方法更新圖表畫布的大小

const chart = echarts.init(document.getElementById(this.id)) //獲取實(shí)例 chart.resize({width: this.width,height: this.height }) //調(diào)用resize方法

官方文檔resize()方法

echartsInstance. resize
Function
(opts?: {
width?: number|string,
height?: number|string,
silent?: boolean
}) => ECharts
改變圖表尺寸，在容器大小發(fā)生改變時(shí)需要手動(dòng)調(diào)用。

• 動(dòng)態(tài)更新表數(shù)據(jù)

監(jiān)聽參數(shù)變化，然后重新setOption()，需要注意的是在setOption()前，需要先clear()，這樣保證在待更新數(shù)據(jù)不全時(shí)，不會(huì)和現(xiàn)有數(shù)據(jù)重疊的問題

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

clear() 的官方文檔解釋

echartsInstance. clear
any
清空當(dāng)前實(shí)例，會(huì)移除實(shí)例中所有的組件和圖表。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。