Echarts 4图形图:按类别指定符号

时间:2019-02-18 19:53:42

标签: echarts

我试图在Echarts 4中创建一个图形图,其中每个节点都属于以下两个类别之一:https://codepen.io/autarkie/pen/LqqZjM

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);

每个类别应有自己的符号。我知道可以为每个节点分别指定符号,如下所示:

var node_shaped = [{
  "id": 1,
  "symbol": "rect",
  "category": 1
}]

但这很不雅致。 Echarts文档(https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.categories.symbol)指定了在每个类别中包含符号的选项,例如上面的代码。但是,该选项对节点形状没有任何影响。而是使用默认的圆形。可以使用类似的类别范围的选项来更改类别颜色,因此我对形状规格为何不起作用感到困惑。谢谢参观。

0 个答案:

没有答案