如何通过API管理Echarts柱状图的选中状态？

我使用Echarts库绘制柱状图，设置了selectedMode='single'，并通过select->itemStyle配置了选中柱子的样式。目前点击柱子可切换选中状态（点击已选中的柱子能取消选中），功能正常。现在需要通过自定义外部控件（比如“清除选中”按钮）来管理柱状图的选中状态，请问可以使用Echarts的哪些API或配置项？

图表配置示例：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      selectedMode: 'single',
      select: {
        itemStyle: {
          color: '#FF0000'
        }
      }
    }
  ]
};

核心使用Echarts的dispatchAction API来主动触发图表的选中/取消选中动作，以下是具体场景的实现：

1. 清除所有选中状态 #

点击外部“清除选中”按钮时，通过unselect动作取消所有柱子的选中状态：

// 假设myChart是你初始化后的Echarts实例
document.getElementById('clearSelectedBtn').addEventListener('click', function() {
  myChart.dispatchAction({
    type: 'unselect',
    seriesIndex: 0 // 对应你的柱状图系列索引，这里是第一个系列
  });
});

2. 主动选中指定柱子 #

如果需要通过外部控件选中某一根特定柱子，使用select动作并指定目标柱子的dataIndex（即该柱子在系列数据中的位置）：

// 选中周三（Wed）对应的柱子，其dataIndex为2
document.getElementById('selectWedBtn').addEventListener('click', function() {
  myChart.dispatchAction({
    type: 'select',
    seriesIndex: 0,
    dataIndex: 2
  });
});

3. 切换指定柱子的选中状态 #

要模拟点击柱子的切换效果（选中变未选中，未选中变选中），使用toggleSelect动作：

// 切换周五（Fri）柱子的选中状态，其dataIndex为4
document.getElementById('toggleFriBtn').addEventListener('click', function() {
  myChart.dispatchAction({
    type: 'toggleSelect',
    seriesIndex: 0,
    dataIndex: 4
  });
});

注意事项 #

• 确保调用dispatchAction时，Echarts实例myChart已经完成初始化（即执行过echarts.init(dom)）。
• seriesIndex对应你配置中系列的索引，若只有一个系列则填0即可；如果有多个系列，可根据实际需求指定。

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