Echarts图表重复加载、axis重复多次请求问题解决记录

1. 需求描述

使用Echats实现了一个中国地图&＃xff1a;

1. 通过选择查询周期&＃xff0c;点击查询按钮查询全国数据。
2. 点击地图中省份在表格以及其他图表中展示具体省份的数据信息。
3. 点击没有数据的省份&＃xff0c;会提示该省份无数据。

2. 问题描述

这时出现了两个问题&＃xff1a;
每点击一次查询之后&＃xff0c;再点击中国地图中的省份&＃xff1a;

• axis发的请求就会多一次。
• 提示省份无数据的提示框也会叠加一个&＃xff0c;如图&＃xff1a;

正常状态&＃xff1a;

问题状态&＃xff1a;

点击了几次查询按钮以后&＃xff0c;再点击中国地图中的省份&＃xff0c;好几个提升框叠加到了一起,并且会重复发axis请求。

3. 解决方法

考虑到应该是Echarts没有正确销毁导致的&＃xff0c;修改代码后&＃xff0c;问题解决。

// 原代码&＃xff1a;let chart &＃61; echarts.getInstanceByDom(this.$refs.map) || echarts.init(this.$refs.map);disposeChart() {this.chart && this.chart.dispose();
}
// 修改后&＃xff1a;
let chart &＃61; this.chart &＃61; echarts.getInstanceByDom(this.$refs.map) || echarts.init(this.$refs.map);disposeChart() {this.chart && this.chart.dispose();
}


“Great things are done by a series of small things brought together.”

--Vincent Van Gogh