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

<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 画布大小 更新图表数据的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。