title: How to change width and height of graphic 'rect' programmatically in Echarts (by implementing onClick event or make it resizable by dragging)
body: <p>I'm using latest echarts and trying to put a rectangle on the canvas using <a href="https://echarts.apache.org/en/option.html#graphic" rel="nofollow noreferrer">graphic</a> option.
  We can set width and height of <em><code>type: 'rect'</code></em> by using Shape.width and Shape.height according to <a href="https://echarts.apache.org/en/option.html#graphic.elements-rect.shape.width" rel="nofollow noreferrer">this</a> documentation.</p>
  <p>What I want to do is that I want to change that width and height of rectangle</p>
  <ol>
  <li>by clicking on it (by implementing <a href="https://echarts.apache.org/en/option.html#graphic.elements-rect.onclick" rel="nofollow noreferrer">onClick</a> event)</li>
  <li>by dragging like in css 'resize' property to a div. Is this possible in echarts?</li>
  </ol>
  <p>Here is the sample option code that I'm currently trying to implement. You can use it by replacing it <a href="https://echarts.apache.org/examples/en/editor.html?c=line-stack" rel="nofollow noreferrer">here</a>. The setter function <code>setWidth()</code> can change the value of width variable but <code>Shape.width</code> will not call <code>getWidth()</code> function again. There will not be a new render happening.</p>
  <pre><code>let width = 100;
  
  function getWidth() {
    return width;
  }
  
  function setWidth(value) {
    width = value;
  }
  
  option = {
    graphic: {
      elements: [
        {
          type: 'rect',
          draggable: true,
          shape: {
            x: 0,
            y: 0,
            width: getWidth(),
            height: 100
          },
          style: {
            fill: 'red'
          },
          onclick: function(e) {
            setWidth(400)
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    }
  };
  </code></pre>