title: Why does an Echarts area overlap error occur?
body: <p>When a lot of seriese is given, the title area, legend area, and series area overlap.
  Is it an error in the echart or is there an option to prevent overlapping of each area?
  I don't want to overlap.. Please help!
  Below is the full code and execution image.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;ECharts&lt;/title&gt;
      &lt;!-- &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; --&gt;
      &lt;!-- including ECharts file --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.js&quot; integrity=&quot;sha256-sUooOytefUADJexb19eGUFQXchr7mptTQkuFlyrU58c=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- prepare a DOM container with width and height --&gt;
      &lt;div id=&quot;main&quot; style=&quot;width: 100%;min-height:30rem;&quot;&gt;&lt;/div&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          // based on prepared DOM, initialize echarts instance
          var myChart = echarts.init(document.getElementById('main'));
  
          var series = [];
          var legend_data = [];
          for(var cnt=0; cnt &lt;100; cnt++){
              var series_item = {
                  name: 'test'+cnt,
                  type: 'line',
                  data: [Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random()]
              };
              legend_data.push('test'+cnt);
              series.push(series_item);
          }
  
          // specify chart configuration item and data
          var option = {
              title: {
                  text: 'test status'
              },
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data:legend_data
  
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  data: [&quot;shirt&quot;,&quot;cardign&quot;,&quot;chiffon shirt&quot;,&quot;pants&quot;,&quot;heels&quot;,&quot;socks&quot;]
              },
              yAxis: {
                  type: 'value'
              },
              series: series
          };
  
          // use configuration item and data specified to show chart
          myChart.setOption(option);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
      
  </code></pre>
  <p><a href="https://i.stack.imgur.com/8qKGD.jpg" rel="nofollow noreferrer">enter image description here</a></p>