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

1. 需求描述

使用Echats实现了一个中国地图：

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

2. 问题描述

这时出现了两个问题：
每点击一次查询之后，再点击中国地图中的省份：

• axis发的请求就会多一次。
• 提示省份无数据的提示框也会叠加一个，如图：

正常状态：

问题状态：

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

3. 解决方法

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

// 原代码：
 let chart  = echarts.getInstanceByDom(this.$refs.map) || echarts.init(this.$refs.map);
 
disposeChart() {
        this.chart && this.chart.dispose();
}
// 修改后：
let chart = this.chart = 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