慕课在线编辑器

代码提交代码

<!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: 960px; height: 400px;"></div>

const option = {
				xAxis: { type: 'category', data: aggData.map(({ name }) => name) },
				yAxis: { type: 'value' },
				grid: { width: '47%' },
				tooltip: { show: true },
				series: [
					{ type: 'bar', data: aggData, emphasis: { itemStyle: { color: '#336666' } } },
					{ type: 'pie', data: aggData, center: ['75%', '50%'], radius: '43%' },
				],
			};
			myChart.setOption(option);

// 监听鼠标hover事件
			myChart.on('mouseover', 'series', (event) => {
				const { seriesType, name } = event;
				if (seriesType === 'pie') {
					// 鼠标停留在饼图上时，触发柱状图对应数据项的高亮效果
					myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name });
				} else if (seriesType === 'bar') {
					// 鼠标停留在柱状图上时，触发饼图对应数据项的选中效果
					myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, name });
				}
			});

// 在柱状图上监听鼠标click事件
			myChart.on('click', 'series.bar', (event) => {
				const { name } = event;
				// 柱状图上发生点击事件时，图表聚焦到数据项对应的细节数据上
				const serie = data.find((serie) => serie.name === name);
				myChart.setOption({
					xAxis: {
						data: weeks,
					},
					series: [
						{ data: serie.data },
						{ data: serie.data.map((value, index) => ({ name: weeks[index], value })) },
					],
				});
			});
		</script>
	</body>
</html>

运行结果