注:其实完全可以在实例化之前,使用echarts.init(document.getElementById('xxx')).dispose();解决
项目开发中有一个echarts折线图表展示,根据下拉框选择,请求不同接口,结合时间选择,传给后台,进而获取数据进行绘制。其中信号强度为多条折线图,链路质量为单条折线,根据下拉进行切换,点击查询后,不能完全绘制成功。
分析:切换绘制时,上一个绘制内容未能完全销毁导致。
解决:
<!--template--> <div id="myEcharts" v-if="alive"></div> //script data() { return { alive: true } }, methods: { //查询按钮触发,根据下拉判断调用那个接口,进行url和参数组装 echartsHandle() { //url和参数组装 ..... //调用axios请求方法 this.alive = false;//此时销毁 this.$nextTick(() => {//结合$nextTick使用 this.alive = true; this.getEchartsData(url,param); }) } }