在项目中,常常会使用按钮等切换两图表的显示,在切换时,容易发生数据污染,原图表的数据仍会保留在页面中,并且影响例外图表的数据显示。
两个图表之间使用v-if控制显示隐藏,并且在绘制图表时,实例(vue框架)。
多次调用绘制图表时,option选项默认是合并(merge)的。
const Chart = this.$refs.chart1;
let Option = this.setOption(this.trendData);
this.instance = this.$echarts.init(Chart);
this.instance.setOption(Option, true); // 加入true 表示不合并配置
Vue中ECharts图表切换防数据污染

本文探讨了在Vue项目中使用ECharts图表时,如何避免图表切换时的数据污染问题。通过v-if控制图表的显示隐藏,并利用实例方法正确绘制图表,确保每次切换时旧数据被清除,新数据准确加载。
832





