代码
提交代码
<!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>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const weeks = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const data = [
{ name: 'X-0', data: [27, 32, 69, 127, 147, 76, 86] },
{ name: 'X-1', data: [58, 68, 1, 154, 156, 168, 38] },
{ name: 'X-2', data: [44, 54, 176, 113, 62, 51, 18] },
{ name: 'X-3', data: [80, 42, 5, 92, 45, 108, 98] },
{ name: 'X-4', data: [22, 76, 2, 45, 173, 17, 9] },
{ name: 'X-5', data: [136, 164, 90, 161, 171, 106, 18] },
{ name: 'X-6', data: [73, 163, 43, 159, 135, 99, 9] },
{ name: 'X-7', data: [151, 21, 103, 165, 177, 134, 70] },
{ name: 'X-8', data: [43, 101, 76, 133, 172, 85, 64] },
{ name: 'X-9', data: [130, 72, 65, 85, 112, 24, 85] },
];
const aggData = data.map(({ name, data }) => ({ name, value: data.reduce((r, v) => r + v, 0) }));
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>
运行结果