概述:如果首次查询的折线图有8条,二次查询的只有5条,刚开始还以为是后端传错了,结果查看以后,后端数据返回的数据条目是对的,那问题肯定就是前端的了,本以为每次查询清空所赋值的对象或数组,也不行。结果了解以后是Echarts渲染的问题。
原因:折线图setOption时,默认对option进行合并,所以即使一次选择一条数据渲染时(除了首次)也会数据重叠显示多条折线
解决方案1:
根据api上说的,notMerge参数默认为false,设置成true,只要不让它合并数据那么问题就解决了
mychart.setOption(option,true);
方案2:也是我推崇的,获取当前的Echarts实例以后,直接this.myChart.clear();即可
loadEchart() {
this.myChart = Echarts.init(this.$refs.radarChart)
this.myChart.clear(); //就这一句就可以了
}