首页 > 其他分享 >echarts饼图鼠标移入高亮设置

echarts饼图鼠标移入高亮设置

时间:2023-01-04 18:37:05浏览次数:52  
标签:高亮 echart color itemStyle value name type 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/

标签:高亮,echart,color,itemStyle,value,name,type,echarts,鼠标
From: https://www.cnblogs.com/rensk/p/17025690.html

相关文章