以下是一个简单的例子，演示如何在 ECharts 饼图中监听扇形的选中事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 饼图事件</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个包含饼图的 DOM 元素 -->
<div id="pieChart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('pieChart'));
// ECharts 配置项
var option = {
// 饼图类型
series: [{
type: 'pie',
data: [
{value: 335, name: 'Category 1'},
{value: 310, name: 'Category 2'},
{value: 234, name: 'Category 3'},
{value: 135, name: 'Category 4'},
{value: 1548, name: 'Category 5'}
],
// 饼图选中模式
selectedMode: 'single', // 或 'multiple'
// 选中事件
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
selected: { 'Category 2': true }, // 默认选中的扇形
// 事件监听
events: {
// 选中事件
selected: function (params) {
console.log(params); // 输出选中的扇形信息
// 在这里可以添加你的业务逻辑
}
}
}]
};
// 使用配置项设置 ECharts 图表
myChart.setOption(option);
</script>
</body>
</html>
在上面的例子中，通过设置 selectedMode 和 selected 属性，我们定义了饼图的选中模式和默认选中项。然后，在事件监听器中，我们监听了选中事件，并在控制台输出了选中的扇形信息。你可以根据需要在事件处理函数中执行你的业务逻辑。
请注意，selectedMode 的取值可以是 'single'（单选模式）或 'multiple'（多选模式），具体取决于你的需求。此外，你可以根据实际情况调整选中时的样式和响应。
转载请注明出处：http://www.zyzy.cn/article/detail/5098/ECharts