持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情
最近的公司项目,基于vue3的展示大屏项目开始测试了(声明:本人也不太熟悉vue3,刚开始接触),结果给我测出来一个让我意想不到又满脸问号的bug,来来回回改了好几次,还是没有能够解决问题,由于还有其他项目比较忙,就先延期处理了。
具体的现象是,点击饼图的legend图例,按理说应该是隐藏或者显示饼图中与之相对应的部分,可是当我鼠标双击或者连续快速点击图例时(不只是点击同一个图例,快速点击不同图例也包括),饼图显示就会出问题,控制台没有报错信息。
如上图中显示的情况就是“已完成”部分图例已经变成灰色,应该不对应的黄色部分,而“整改中”部分应该是显示的,而饼图中并没有显示对应的蓝绿色部分。
"dependencies": {
"@element-plus/icons": "0.0.11",
"@element-plus/icons-vue": "^1.1.4",
"axios": "^0.26.1",
"core-js": "^3.6.5",
"echarts": "^4.9.0",
"echarts-liquidfill": "^2.0.6",
"element-plus": "^2.1.2",
"pdf-dist": "^1.0.0",
"postcss-px-to-viewport": "^1.1.1",
"qs": "^6.10.3",
"v-charts": "^1.19.0",
"vue": "^3.0.0",
"vue-loader-v16": "^16.0.0-beta.5.4",
"vue-pdf": "^4.3.0",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
刚开始我以为是这个项目中有加载3D模型,可能占用了大部分资源,导致变卡,影响了echarts渲染的性能,于是去找领导说明了情况,领导告诉我在没有3D模型的页面,也会出现这个bug,所以跟模型加载没关系。
现在我有点没有头绪了,不知道是什么原因,但肯定是跟视图更新有关系的,下面粘上我的代码,请大神帮我解答一下我的疑惑,在下不胜感激
const getpieCharts = () => {
echarts.init(document.getElementById('safetypiechart')).dispose();
let pie = document.getElementById('safetypiechart')
data.saftyOption = {
title: {
text: data.safetycount,
textStyle: {
color: '#00feef',
fontSize: 20,
},
subtext: '问题总数',
subtextStyle: {
color: '#00feef',
fontSize: 15,
},
itemGap: 10, // 主副标题距离
left: '24%',
top: '36%',
textAlign: 'center'
},
color: ['#0fc7fe', '#00feef', '#fafe21', '#fe8a26','#df6e88'],
legend: {
show: true,
top: '15%',
left: '55%',
orient: 'vertical',
itemWidth: 14,
itemGap: 12,
textStyle: {
color: "rgba(255, 255, 255, 1)"
}
},
series: [{
name: '安全管理',
type: 'pie',
center: ["25%", "55%"],
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'right'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data.safeAnalyse
}]
};
data.piecharts = echarts.init(pie);
data.piecharts.setOption(data.saftyOption);
}
电脑是win10的,浏览器是Chrome。