title: ECharts. How to apply width on title?
body: <p>I need limit width on echarts title as especified on <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#title.textStyle.width" rel="nofollow noreferrer">documentation</a>.
  I setted textStyle rich since is necessary to apply width but is not working.</p>
  
  <p>In this example I used a echarts demo modified. Legends is overlapped by title despite width is setted at 20%.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  app.title = '环形图';
  
  option = {
   title: {
      text: "{aaa|Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}",
    textStyle: {
        width: '20%',
       rich: {
            aaa: {
              backgroundColor: 'red',
              color: 'blue'
            }
       }
    }
   },
      legend: {
          data:['邮件营销','联盟广告']
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              boundaryGap : false,
              data : ['周一','周二']
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      series : [
          {
              name:'邮件营销',
              type:'line',
              stack: '总量',
              areaStyle: {},
              data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
              name:'联盟广告',
              type:'line',
              stack: '总量',
              areaStyle: {},
              data:[220, 182, 191, 234, 290, 330, 310]
          }
      ]
  };
  
  if (option &amp;&amp; typeof option === "object") {
      myChart.setOption(option, true);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"&gt;&lt;/script&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
      html,
      body {
        height: 100%;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container" style="height: 100%"&gt;&lt;/div&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks.</p>
  
  <p>Maybe a bug so I created an <a href="https://github.com/apache/incubator-echarts/issues/9311" rel="nofollow noreferrer">Github Issue</a></p>