当使用同一echarts组件时切换导航栏数据发生变化但图仍然存在

目录

问题描述

解决问题

---

问题描述

在tabs导航栏进行切换时，随着条件的不同，echarts渲染的数据也有所不同，而此时会出现echats图例中只存在两个元素，而在图形柱状图内却出现了三条柱状图，这明显是对应不上的。

如下图所示：

1.此时图例上只存在两个，说明echarts图形内只存在男，女两种信息

2.当切换导航栏信息再切换到此界面时，此时的图例仍然为男女而柱形图却多了一条

 多了一条橙色的数据，而此时后端返回的数据是正确的

解决问题

了解到问题所在，就可以去了解echarts的方法，我们可以了解一下echarts的方法setOption的使用

chart.setOption(option, notMerge, lazyUpdate);

它接受三个参数，第一个则是配置对象，第二个就是关键所在notMerge 可选。意思为：是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。

如果我们想要防止问题出现，则可以对第二个参数notMerge传true，这意味着每一次都重新创建echarts，这样就不会出现上一个导航残留下来的ehcarts图

 如以下代码：

chart.setOption(option, true, lazyUpdate);