title: Echarts 4 graph plot: specify symbol per category
body: <p>I am trying to create a graph plot in Echarts 4, where each node belongs to one of two categories: <a href="https://codepen.io/autarkie/pen/LqqZjM" rel="nofollow noreferrer">https://codepen.io/autarkie/pen/LqqZjM</a>: </p>
  
  <pre><code>var nodes = [{
    "id": 1,
    "category": 1
  }, {
    "id": 2,
    "category": 0
  }, {
    "id": 3,
    "category": 1
  }, {
    "id": 4,
    "category": 0
  }];
  
  var links = [{
    "source": "3",
    "target": "1"
  }, {
    "source": "3",
    "target": "2"
  }, {
    "source": "1",
    "target": "2"
  }, {
    "source": "2",
    "target": "4"
  }];
  
  var myChart = echarts.init(document.getElementById('chart'));
  var option = {
    backgroundColor: new echarts.graphic.RadialGradient(0.4, 0.4, 0.7, [{
      offset: 0,
      color: '#162436'
    }, {
      offset: 1,
      color: '#000'
    }]),
  legend: {
      data: ["Type 1", "Type 2"],
      textStyle: {
        color: '#fff'
      },
      icon: 'circle',
      type: 'scroll',
      orient: 'vertical',
      left: 10,
      top: 20,
      bottom: 20,
      itemWidth: 10,
      itemHeight: 10
    }, 
    animationDurationUpdate: 300,
    animationEasingUpdate: 'quinticInOut',
    series: [{
      type: 'graph',
      layout: 'force',
      // symbol: 'rect',
      //symbolSize: 10,
      lineStyle: {
        normal: {
          curveness: 0.1
        }
      },
      roam: true,
      focusNodeAdjacency: true,
      legendHoverLink: true,
      draggable: true,
      force: {
        repulsion: 30,
        gravity: 0.03,
        edgeLength: 50,
        layoutAnimation: true
      },
  
      data: nodes,
      links: links,
      categories: [{
          name: 'Type 1',
         symbol: 'diamond', // !!! DOES NOT WORK !!! 
          symbolSize: 30, // !!! DOES NOT WORK !!! 
          itemStyle: {
            color: '#79d2a6'
          }
        },
        {
          name: 'Type 2',
          symbol: "rect", // DOES NOT WORK
          symbolSize: 20, // DOES NOT WORK
          itemStyle: {
            color: '#ff9900'
  
          }
        }
      ],
    }]
  };
  
  myChart.setOption(option);
  </code></pre>
  
  <p>Each category should have its own symbol. I know it is possible to specify the symbol for each node separately, like so: </p>
  
  <pre><code>var node_shaped = [{
    "id": 1,
    "symbol": "rect",
    "category": 1
  }]
  </code></pre>
  
  <p>but it this is quite inelegant. Echarts documentation (<a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.categories.symbol" rel="nofollow noreferrer">https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.categories.symbol</a>) specifies the option to include a symbol per category, like in the code above. However, that option has no effect whatsoever on the node shapes. Instead, the default circle shape is used. It is possible to change category color using a similar category-wide option, so I am at loss as to why the shape specification doesn't work. Thanks for taking a look. </p>