[Bug] markAreas disappear when zooming in

Version

5.3.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-sections

Steps to Reproduce

This code is from the given line chart example, extended by zooming functionality and exact limits for markAreas.

option = {
  title: {
    text: 'Distribution of Electricity',
    subtext: 'Fake Data'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
dataZoom: [{}], // WITH ZOOMING
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // prettier-ignore
    data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} W'
    },
    axisPointer: {
      snap: true
    },
  },
  series: [
    {
      name: 'Electricity',
      type: 'line',
      smooth: true,
      // prettier-ignore
      data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              name: 'Morning Peak',
              xAxis: '07:30',
              
            },
            {
              xAxis: '10:00',
              yAxis: 700 // EXACT LIMIT HERE
            }
          ],
          [
            {
              name: 'Evening Peak',
              xAxis: '17:30'
            },
            {
              xAxis: '21:15'
            }
          ],
          [
          {yAxis: 200}, {yAxis: 600, xAxis: '22:30'}, // EXACT LIMIT HERE
            ]
        ]
      }
    }
  ]
};

Current Behavior

When applying limits for the markArea, and zooming in, the markAreas disappear.

So the initial view looks fine:

But when you start zooming, markAreas will disappear.

Also applied dataZoom filterMode with ‘weakFilter’, ‘empty’ and ‘none’, but these settings did not resolve the issue.

Expected Behavior

The markAreas should still be visible in the window, also when zooming in.

Environment

- OS: macOS Big Sur
- Browser: Chrome
- Using one of the Echarts examples editor

Any additional comments?

No response

[jiawulin001]

Right, as is said by @susiwen8 , this is a similar problem here: https://github.com/apache/echarts/blob/3b7ff4fc258b261a7754ab73e1b1424ce9c34437/src/component/marker/MarkAreaView.ts#L127-L137 The filter is applied and allow markArea to stay only when at least one of the specified corner point of the markArea is in the coordinate system. That’s why the markArea is clipped when zoom-in. The plan is to improve the judgment of whether the markArea is in coord. But to be honest, why not just set all markArea to showing ALL THE TIME, which means just return true. I believe that’s too tiny to affect the performance. Submitting a PR to solve this.

[zmyjs]

我也遇到了，解决办法了吗？