echarts饼图鼠标移入高亮设置

通过鼠标移入配合dispatchAction设置itemStyle.color的颜色

// 饼图
let echart = echarts.init(document.getElementById(this.echartId.source));
echart.setOption({
	series: [
		{
			type: 'pie',
			data: [
				{ value: 335, name: '教师', itemStyle: { color: '#204570' } },
				{ value: 234, name: '学生', itemStyle: { color: '#204570' } },
				{ value: 1548, name: '职工', itemStyle: { color: '#204570' } }
			],
			radius: ['30%', '50%'],
			center: ['50%', '25%']
		},
		{
			type: 'pie',
			data: [
				{ value: 335, name: '线上', itemStyle: { color: '#204570' } },
				{ value: 234, name: '线下', itemStyle: { color: '#204570' } }
			],
			radius: ['30%', '50%'],
			center: ['50%', '75%']
		}
	]
});
echart.dispatchAction({
	type: 'highlight',
	seriesIndex: 1,
	dataIndex: 1
});
echart.on('mouseover', function(e) {
	console.log(e);
	echart.dispatchAction({
		type: "highlight",
		seriesIndex: 0,
		dataIndex:1
	});
});
echart.on("mouseout", function(e) { 
	echart.dispatchAction({
		type: "downplay",
		seriesIndex: 0,
		dataIndex:1
	});
});

参考:https://www.bbsmax.com/A/pRdBg8rnzn/

posted @ 2023-01-04 18:15  蒜泥香菜  阅读(1566)  评论(0)    收藏  举报