[Bug] Boxplots don't clip properly with data zoom

[pundavalli11]

Version

5.3.3

Link to Minimal Reproduction

[Repro]

Steps to Reproduce

1. Try the following option. This is included the repro link.

$.when(
  $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
  $.getScript(
    'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
  )
).done(function (res) {
  run(res[0]);
});
function run(_rawData) {
  echarts.registerTransform(ecSimpleTransform.aggregate);
  option = {
    dataset: [
      {
        id: 'raw',
        source: _rawData
      },
      {
        id: 'since_year',
        fromDatasetId: 'raw',
        transform: [
          {
            type: 'filter',
            config: {
              dimension: 'Year',
              gte: 1950
            }
          }
        ]
      },
      {
        id: 'income_aggregate',
        fromDatasetId: 'since_year',
        transform: [
          {
            type: 'ecSimpleTransform:aggregate',
            config: {
              resultDimensions: [
                { name: 'min', from: 'Income', method: 'min' },
                { name: 'Q1', from: 'Income', method: 'Q1' },
                { name: 'median', from: 'Income', method: 'median' },
                { name: 'Q3', from: 'Income', method: 'Q3' },
                { name: 'max', from: 'Income', method: 'max' },
                { name: 'Country', from: 'Country' }
              ],
              groupBy: 'Country'
            }
          },
          {
            type: 'sort',
            config: {
              dimension: 'Q3',
              order: 'asc'
            }
          }
        ]
      }
    ],
    title: {
      text: 'Income since 1950'
    },
    tooltip: {
      trigger: 'axis',
      confine: true
    },
    xAxis: {
      name: 'Income',
      nameLocation: 'middle',
      nameGap: 30,
      scale: true
    },
    yAxis: {
      type: 'category'
    },
    grid: {
      bottom: 100
    },
    legend: {
      selected: { detail: false }
    },
    
    toolbox: {
    show: true,
    feature: {
      dataZoom: {
        filterMode: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
    series: [
      {
        name: 'boxplot',
        type: 'boxplot',
        datasetId: 'income_aggregate',
        itemStyle: {
          color: '#b8c5f2'
        },
        encode: {
          x: ['min', 'Q1', 'median', 'Q3', 'max'],
          y: 'Country',
          itemName: ['Country'],
          tooltip: ['min', 'Q1', 'median', 'Q3', 'max']
        }
      },
      {
        name: 'detail',
        type: 'scatter',
        datasetId: 'since_year',
        symbolSize: 6,
        tooltip: {
          trigger: 'item'
        },
        label: {
          show: true,
          position: 'top',
          align: 'left',
          verticalAlign: 'middle',
          rotate: 90,
          fontSize: 12
        },
        itemStyle: {
          color: '#d00000'
        },
        encode: {
          x: 'Income',
          y: 'Country',
          label: 'Year',
          itemName: 'Year',
          tooltip: ['Country', 'Year', 'Income']
        }
      }
    ]
  };
  myChart.setOption(option);
}

2. Try to zoom in on a boxplot.
3. Notice that the boxplot will go out of the bounds.

Current Behavior

When a user zooms in on a boxplot with filterMode set to none, the boxplots go outside of the bounds of the chart. As a user, this can be a cumbersome experience.

Expected Behavior

Boxplots should be clipped if they extend outside the bounds and boundaries of the chart, similar to line chart.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

Relevant issue: #11240

[Ovilia]

According to the doc, filterMode: 'none' means intentionally don't clip any data. So this is not a bug. You can set it to be 'filter' if needed.

[ddt313]

Hi @Ovilia, Can we add a clip option for the boxplot chart? Same with scatter, line, bar, lines, custom charts
Relevant #11240