[GitHub] [echarts] emwinter opened a new issue, #16853: [Bug] markAreas disappear when zooming in

[GitBox]

emwinter opened a new issue, #16853:
URL: https://github.com/apache/echarts/issues/16853

   ### 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:
   
   
![image](https://user-images.githubusercontent.com/47206567/162408884-d0ff8935-612d-4129-bf11-d733d4b05d80.png)
   
   But when you start zooming, markAreas will disappear.
   
   
![image](https://user-images.githubusercontent.com/47206567/162409140-c00464e6-3ab0-4b45-8723-4c1eb02b985f.png)
   
   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
   
   ```markdown
   - OS: macOS Big Sur
   - Browser: Chrome
   - Using one of the Echarts examples editor
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org