title: eCharts xAxis bug when zooming with datazoom
body: <p>I’m struggling to find a way to fix this bug. I’m displaying a chart with 2 Yaxis and a datazoom. Works fine most of the time:</p>
  
  <p><a href="https://i.stack.imgur.com/5HmFA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5HmFA.png" alt="Chart with 2 Yaxis and datazoom"></a></p>
  
  <p>If I unselect a line (Say Price) then one of the Yaxis becomes hidden. That’s fine. But if I then zoom in again, I’m facing a bug where the Xaxis goes to the center of the charts.</p>
  
  <p><a href="https://i.stack.imgur.com/7PNHf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7PNHf.png" alt="Chart with 1 Yaxis selected and buggy"></a></p>
  
  <p>I’ve been trying every option on the xAxis and Yaxis with no luck. Any advice?</p>
  
  <p>Here is my option array I pass to the echart library</p>
  
  <pre><code>let stacked_scores_options = {
  
               color: ['#000', '#ff7f50', '#87cefa', '#ba55d3', '#32cd32', '#6495ed', '#ff69b4'],
  
              // Setup grid
              grid: {
                  x: 55,
                  x2: 42,
                  y: 30,
                  y2: 95
              },
  
              title : {
                  textStyle: {
                      fontFamily: "Roboto",
                      fontSize: "17",
                      fontWeight: "400"
                  },
                  padding: [0,0,5,10]
              },
              tooltip : {
                  trigger: 'axis',
                  formatter: tooltipSentScore,
              },
              legend: {
                   data:['Price', 'Sentscore', 'News', 'Social', 'Buzz', 'Fundamental', 'Technical'],
                  selected: {
                      // 'Price': true,
                      'Sentscore': true,
                      'News': false,
                      'Social': false,
                      'Buzz': false,
                      'Fundamental': false,
                      'Technical': false,
                  },
              },
              dataZoom : {
                  show : true,
                  y: 410,
                  realtime: true,
                  start : 0,
                  end : 100
              },
              xAxis : [
                  {
                      type : 'category',
                      boundaryGap : true,
                      position: 'bottom',
                      axisTick: {
                          inside: true,
                          alignWithLabel: true,
                      },
                      data : [],
                      scale: true,
                      axisLabel: {
                          showMaxLabel: true,
                          showMinLabel: true,
                          formatter: function (value, index) {
                              var res = value.split(" ");
                              return res.join('\n');
                          }
                      }
                  }
              ],
              yAxis : [
                  {
                      type : 'value',
                      scale:true,
                      splitNumber: 'auto',
                      boundaryGap: [0.01, 0.01]
                  },
                  {
                      type : 'value',
                      scale:true,
                      splitLine: { show: false },
                      splitNumber: 'auto',
                      boundaryGap: [0.01, 0.01],
  
                      axisLabel : {
                          formatter: '${value}'
                      },
                      name: 'USD Prices',
                      nameLocation: 'middle',
                      nameGap: 50
                  }
              ],
              series : [
                   {
                       name:'Price',
                       type:'line',
                       symbol: 'none',
                       yAxisIndex: 1,
                       data: []
                  },
                  {
                      name:'Sentscore',
                      type:'line',
                      symbol: 'none',
                      data: []
                  },
                  {
                      name:'News',
                      type:'line',
                      symbol: 'none',
                      data: []
                  },
                  {
                      name:'Social',
                      type:'line',
                      symbol: 'none',
                      data: []
                  },
                  {
                      name:'Buzz',
                      type:'line',
                      symbol: 'none',
                      data: []
                  },
                  {
                      name:'Fundamental',
                      type:'line',
                      symbol: 'none',
                      data: []
                  },
                  {
                      name:'Technical',
                      type:'line',
                      symbol: 'none',
                      data: []
                  }
              ]
          };
  </code></pre>