一、从后台获取数据后,出现echars图重复显示的问题
解决:
1)在请求的时候先把接收数据的变量清空
2)调用从自己封装的画图的方法时,最好采用传参的方式
3)Echarts标签过长省略-鼠标经过显示完整https://blog.csdn.net/csm17805987903/article/details/85111595
4)页面画多个echars图,接入后端数据,数据无法显示问题
解决:接入后端接口时,使用同步。否则会由于异步加载问题导致echars数据无法正常显示
二、一个页面画多个echarts图形,resize失效
如上图所写会出现当一个页面有多个echars图时,resize方法失效,
解决方法:将上述代码改为
window.addEventListener("resize", function () {
myChart.resize();
});
三、使用echars画多个图时出现因为echars缓存导致图像滞留问题
问题描述:
1)要求:点击如图统计出现echars图表,点击报表出现表格。但是在我由统计切换到报表时出现如图现象
解决:和上边解决echars重复一样,在切换的时候将echars中的数据都清空
watch: {
isWho: {
handler: function(newName, oldName) {
this.value2 = ""
this.timeState = "1"
this.activeName = "first"
if (newName) {
const _this = this;
// 不加定时器,那些元素没来的及渲染,画echars时会报错
setTimeout(function() {
_this.getConn(_this.timeState);
}, 500);
} else {
this.value2 = ""
this.timeState = "1"
this.activeName = "first"
this.newSecArray = [];
this.securityTDataX = [];
this.securityTDataY = [];
this.qualityTDataX = [];
this.qualityTDataY = [];
this.typePieData = [];
this.handelData = [];
this.getTable(this.timeState, this.pageNum, this.pageSize);
}
}
// immediate: true
},
timeState: {
// immediate: true,
handler: function(newVal) {
const _this = this;
_this.value2 = "";
if (this.isWho) {
_this.getConn(newVal);
} else {
_this.getTable(newVal, _this.pageNum, _this.pageSize);
}
}
}
},
四、由于echars缓存导致,数据混乱的问题(echarts 数据重新加载,原数据依然存在图表上)
问题描述:要求对后台给出的数据进行筛选,如果数量都为0怎展示暂无数据,如果有不为0的显示数据。这是如果不做处理,会导致在请求参数发生变化时由于echars缓存导致数据显示混乱
解决:使用echars的clear()方法,并且设置:myChart.setOption(option,true); // 加上true表示不合并配置