慕课在线编辑器

代码提交代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

var myChart = echarts.init(document.getElementById('main'));
			var data = generateData(cats);

var option = {
				toolbox: {
					feature: {
						saveAsImage: {},
					},
				},
				series: [
					{
						type: 'pie',
						data: data.inner,
						radius: '40%',
						label: { position: 'inside' },
						id: 'inner',
						selectedMode: 'multiple',
					},
					{ type: 'pie', id: 'outer', data: data.outer, radius: ['50%', '80%'], selectedMode: 'multiple' },
				],
			};
			myChart.setOption(option);

// 找到关联类别
			function lookup(e) {
				// 当前操作的项
				var currentItem = e.name;
				var isSelected = e.selected[e.name];
				// 当前操作的序列
				var seriesId = e.seriesId;
				if (seriesId === 'inner') {
					// 内层饼图选中时，子项同步选中
					var currentCat = cats.find(function (cat) {
						return cat.name === currentItem;
					});
					return { seriesIndex: 1, names: currentCat.children, isSelected: isSelected };
				} else {
					// 外层饼图选中时，父类同步选中
					var parentCat = cats.find(function (cat) {
						return (
							cat.children.findIndex(function (subItem) {
								return subItem === currentItem;
							}) >= 0
						);
					});
					for (var i = 0; i < parentCat.children.length; i++) {
						var subItem = parentCat.children[i];
						if (e.selected[subItem] === true) {
							return { seriesIndex: 0, names: [parentCat.name], isSelected: true };
						}
					}
					return { seriesIndex: 0, names: [parentCat.name], isSelected: false };
				}
			}

myChart.on('pieselectchanged', function (e) {
				var target = lookup(e);
				var names = target.names;
				var isSelected = target.isSelected;
				var seriesIndex = target.seriesIndex;
				for (var i = 0; i < names.length; i++) {
					// 发出选中动作
					myChart.dispatchAction({
						type: isSelected ? 'pieSelect' : 'pieUnSelect',
						seriesIndex: seriesIndex,
						name: names[i],
					});
				}
			});
		</script>
	</body>
</html>

运行结果