echarts 饼图悬浮频繁闪动

最新推荐文章于 2026-07-24 11:29:10 发布

原创最新推荐文章于 2026-07-24 11:29:10 发布 · 2.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

echarts

本文介绍了一种常见的ECharts饼图鼠标悬浮时频繁闪烁的问题，并提供了详细的解决方案。通过调整`emphasis.label.show`属性为`true`，可以有效避免闪烁现象。

日常改bug时，发现echarts饼图鼠标悬浮上去频繁闪动，把我整的以为是后端的祸害，吓的我查来查去，最后也没找到答案，只能自己来整了，给秀儿上座，看图、看代码！

echarts闪动

1.我之前在写代码时可能是在官网复制过来的改的，就没多注意，结果还整这出，尴尬了，哈哈哈…

注：在`series`里的`label`下的`show:true`就可以

//这是错误的代码
emphasis: {
	label: {
		show: false,//别整false，否则会出错
	}
},

2.这是已解决的代码

emphasis: {
	label: {
		show: true,//改为true就可以了
	}
},

3.看解决完之后的图

echarts2

4.全部代码


chartGraphFnc7: function () {	// 饼图 数据来源
    datafromFnc = echarts.init(document.getElementById('box3'));
     var option = {
         backgroundColor : '#ffffff',
         tooltip: {
             trigger: 'item', //数据项图形触发
             formatter: '{b}<br/> <b>{c}<b/>' // 展示格式
         },
         legend: {
             show:true,
             selectedMode:false,//取消图例上的点击事件
             bottom: '4%',
             data:dataSourcesRankingDesc,
             // data:['智慧会务','华阳','北斗','A公司','B公司','C公司','D公司','E公司','F公司','G公司',],
         },
         color:['#368cc7','#58b1d3','#8fc436', '#41b972','#279980', '#f8b741','#f0952c', '#c8551e','#da4c40', '#8f0080'],
         series: [
             {
                 name: '访问来源',
                 type: 'pie',
                 radius: ['45%', '60%'],
                 right: '20%',
                 center:['50%', '49%'],
                 startAngle: '90',
                 label: {
                    show: false,
                    position: 'center',
                    fontSize: 14,
					color: '#333A4D',
					normal: {
					show: true,
					formatter: '{b} \n ({d}%)'
					},
                 },
                 emphasis: { //就是这块惹的祸，我整的是false，就一直闪！！！！！
                     label: {
                         show: true,
                     }
                 },
                 labelLine: {
                     show: true
                 },
                 data: dataSourcesRankingData
             }
         ]
     };

     // 为echarts对象加载数据
     datafromFnc.setOption(option);
 },