echarts饼图选中，默认、鼠标移入移出、点击选中

最新推荐文章于 2024-07-11 08:44:34 发布

我人麻了啊

最新推荐文章于 2024-07-11 08:44:34 发布

阅读量2k

点赞数 1

分类专栏： web 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_39143010/article/details/126418656

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

选中效果：
在这里插入图片描述

	//let apiCounterDom = document.getElementById('main');
	//this.apiCounterChart = this.$echarts.init(apiCounterDom);
	//this.apiCounterChart.setOption(this.apiCounterOption);
	//this.pieClick(this.apiCounterChart)

	pieChartSel(charts) {
		const that = this;
		let index = 0;
		//默认选中
	    charts.dispatchAction({
			type: 'highlight',
			seriesIndex: 0,
			dataIndex: 0,
		});

		//hover选中
		 charts.on('mouseover', function(e) {
		 	if (e.dataIndex != index) {
		 		charts.dispatchAction({
		 			type: 'downplay',
		 			seriesIndex: 0,
					dataIndex: index,
		 		});
		 	}
		 });
		 charts.on('mouseout', function(e) {
		 	index = e.dataIndex;
		 	charts.dispatchAction({
		  	type: 'highlight',
		 		seriesIndex: 0,
		 		dataIndex: e.dataIndex,
		 	});
		 });

		//点击选中
		charts.on("click", function(e) {
			if (e.dataIndex != index) {
				charts.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: index,
				});
			}
			index = e.dataIndex;
			charts.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: e.dataIndex,
			});
		});

	}