vue3中echarts饼图更新问题(1) - 发现问题

387 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

最近的公司项目,基于vue3的展示大屏项目开始测试了(声明:本人也不太熟悉vue3,刚开始接触),结果给我测出来一个让我意想不到又满脸问号的bug,来来回回改了好几次,还是没有能够解决问题,由于还有其他项目比较忙,就先延期处理了。

image.png

具体的现象是,点击饼图的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。