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()，这样保证在待更新数据不全时，不会和现有数据重叠的问题

clear() 的官方文档解释

echartsInstance. clear
any
清空当前实例，会移除实例中所有的组件和图表。