如何实现ECharts柱状图类似饼图扇区的选中功能？selectedMode不生效

Got it, let's figure out how to make bar chart columns selectable just like the pie chart sectors you referenced. The thing is, unlike pie charts which have a built-in selectedMode property, bar charts don't support this out of the box. But we can replicate the same behavior with custom data state tracking and event listeners—here's how:

Step 1: Add a selected Flag to Your Series Data #

First, we need a way to track which columns are selected. Add a selected field (defaulting to false) to each data item in your bar series, and define visual styles for both selected and unselected states:

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [
        { value: 120, selected: false },
        { value: 200, selected: false },
        { value: 150, selected: false },
        { value: 80, selected: false },
        { value: 70, selected: false },
        { value: 110, selected: false },
        { value: 130, selected: false }
      ],
      // Define visual styles for selected/unselected columns
      itemStyle: {
        normal: {
          color: (params) => params.data.selected ? '#2f4554' : '#c23531', // Darken selected columns
          borderWidth: (params) => params.data.selected ? 2 : 0, // Add white border to selected columns
          borderColor: '#ffffff'
        }
      }
    }
  ]
};

Step 2: Add Click Event Listener to Toggle Selection #

Next, we'll listen for click events on the chart to toggle the selected state of the clicked column, then update the chart to reflect the change.

For Multi-Selection (Like Pie Chart's selectedMode: 'multiple') #

This lets users select multiple columns at once:

const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

myChart.on('click', (params) => {
  // Only handle bar chart clicks
  if (params.seriesType === 'bar') {
    // Toggle the selected state of the clicked column
    params.data.selected = !params.data.selected;
    // Update the chart with modified data
    myChart.setOption({
      series: [
        { data: params.seriesData }
      ]
    });
  }
});

For Single-Selection (Like Pie Chart's selectedMode: 'single') #

If you want only one column selected at a time (clicking a new column deselects the previous one):

const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

myChart.on('click', (params) => {
  if (params.seriesType === 'bar') {
    // Deselect all columns first
    params.seriesData.forEach(item => {
      item.selected = false;
    });
    // Select the clicked column
    params.data.selected = true;
    // Update the chart
    myChart.setOption({
      series: [
        { data: params.seriesData }
      ]
    });
  }
});

Why selectedMode Didn't Work for You #

The selectedMode property is specific to certain chart types (like pie, scatter, and map) in ECharts. Bar charts don't have this built-in property, so we have to manually manage the selection state and styles as shown above.

This approach will give you the exact selection behavior you saw in the pie chart example—clicking a column will toggle its selected state, with clear visual feedback through changed colors and borders.

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