如何单独禁用ECharts饼图指定扇区并保留事件访问？

我需要单独禁用ECharts饼图中的某个扇区，试过在data项里添加silent: true、在itemStyle的normal或emphasis中设置相关属性，均未生效。核心需求是：禁用一个或多个扇区的交互行为（如hover高亮、点击选中），但仍能通过myChartUse.on("click", ...)事件，以data作为componentType访问到该扇区的信息。

完整代码 #

JavaScript #

const myChartUse = echarts.init(document.getElementById("myChart"));

const option = {
  series: [{
    type: "pie",
    selectedMode: "single",
    selectedOffset: 10,
    // 此处silent: true会禁用所有扇区，但我需要单独指定目标扇区
    //silent: true,
    data: [{
      name: "Name 1",
      value: 30
    }, {
      name: "Name 2",
      value: 50,
      silent: true
      // 也曾尝试 itemStyle: {silent: true}
    }, {
      name: "Value3",
      value: 20
    }]
  }]
}

myChartUse.setOption(option);

HTML #

<head>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>

<div id="myChart" style="width: 700px; height: 600px;"></div>

已尝试的无效方案 #

• 明确silent并非series.data的合法属性，仅用于描述需求；
• 使用itemStyle.opacity不可行，因为仍会触发mouseenter等交互事件；
• 尝试通过dispatchAction取消选中，无效果：

myChartUse.dispatchAction({
  type: 'unselect',
  seriesIndex: 0,
  dataIndex: 1
});

可行解决方案 #

由于ECharts不支持直接给单个data项设置交互禁用，可通过事件拦截+状态控制实现需求：

方案1：拦截事件，跳过指定扇区的交互逻辑 #

在饼图的交互事件回调中，判断当前操作的扇区索引，阻止其默认交互行为（如高亮、选中），同时保留data信息的访问：

// 阻止目标扇区的hover高亮
myChartUse.on('mouseover', 'pie', (params) => {
  if (params.dataIndex === 1) { // 指定要禁用的扇区索引
    myChartUse.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: 1
    });
  }
});

// 点击事件中正常访问data，同时阻止选中
myChartUse.on('click', 'pie', (params) => {
  if (params.dataIndex === 1) {
    // 强制取消选中状态
    myChartUse.dispatchAction({
      type: 'unselect',
      seriesIndex: 0,
      dataIndex: 1
    });
    // 此处可正常处理该扇区的data
    console.log('禁用扇区的data:', params.data);
  } else {
    // 其他扇区正常处理逻辑
    console.log('正常扇区:', params.data);
  }
});

方案2：自定义样式+事件拦截，彻底屏蔽交互视觉反馈 #

给目标扇区设置固定样式，取消hover和选中的视觉变化，再配合事件拦截阻止选中：

首先修改option中的data项：

data: [{
  name: "Name 1",
  value: 30
}, {
  name: "Name 2",
  value: 50,
  // 禁用hover高亮效果
  emphasis: {
    disabled: true
  },
  // 固定为未选中状态
  selected: false
}, {
  name: "Value3",
  value: 20
}]

然后添加事件拦截：

myChartUse.on('click', 'pie', (params) => {
  if (params.dataIndex === 1) {
    myChartUse.dispatchAction({
      type: 'unselect',
      seriesIndex: 0,
      dataIndex: 1
    });
    // 正常访问该扇区的data
    console.log('禁用扇区data:', params.data);
  }
});

以上两种方案均可实现：禁用指定扇区的交互行为，同时在click事件中正常访问该扇区的data信息。

内容的提问来源于stack exchange，提问作者neves