Echarts中关系图的categories究竟怎么生效啊，大佬解救一下

TheWasteLand 2018-01-04 10:29:02

用echarts做了一个关系图，官网教程说series.categories[i].symbol可以修改该类节点的形状，我尝试了，但是不起作用，而且没有报错，代码比较简单，还没有建点与点之间的联系。



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script type="text/javascript" src="echarts.js"></script>

    <style>

        html, body{

            margin: 0;

            padding: 0;

            width: 100%;

            height: 100%;

        }

        #main{

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <div id="main"></div>

    <script type="text/javascript">

        var node_data = [

            {name: '1',category: 0},

            {name: '2',category: 0},

            {name: '3',category: 0},

            {name: '4',category: 0},

            {name: '5',category: 0},

            {name: '6',category: 0},

            {name: '7',category: 0},

            {name: '8',category: 0},

            {name: '11',category: 1},

            {name: '12',category: 1},

            {name: '13',category: 1},

            {name: '14',category: 1},

            {name: '15',category: 1},

            {name: '16',category: 1},

            {name: '17',category: 1},

            {name: '18',category: 1}

        ];



        var myChart = echarts.init(document.getElementById('main'));

        var option = {

            series:[

                {

                    type: 'graph',

                    layout: 'force',

                    draggable: true,

                    categories:[

                        {

                            name: 'cate1',

                            symbol: 'rect'

                        },

                        {

                            name: 'cate2',

                            symbol: 'circle'

                        }

                    ],

                    data: node_data

                }

            ]

        };

        myChart.setOption(option);

    </script>

</body>

</html>

...全文

2228 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

bogeli5 2018-12-14

打赏
举报

楼上说的不对，我试了一下，echart3以后的版本，再用category来控制不同的symbol和size，就不好使了，必须在nodes里边配置属性 graph.nodes.forEach(function (node) { node.itemStyle = null; node.value = node.symbolSize; node.symbolSize /= 1.5; node.label = { normal: { show: node.symbolSize > 30 } }; node.category = node.attributes.modularity_class; }); 具体可以参考一下官方这个例子： http://www.echartsjs.com/gallery/editor.html?c=graph&theme=dark 但是注意这个例子本身也是错的，layout必须设置成force，不能设置成none

sinat_39084989 2018-02-06

打赏
举报

我也遇到类似的问题了，categories中的symbol跟symbolSize都不起作用，求问楼主怎么解决的，给跪了

小程序猿之路 2018-01-05

打赏
举报

category: 就是类目，节点一共多少类，node_data 每一个值都会有对应的category，也就是这个数据是这个类目的，类目名跟图例对应
你的symbol设置是对的，可以单独设置每个类目的symbol，也可以设置全部类目的symbol
series:[
{
type: 'graph',
layout: 'force',
draggable: true,
symbol:'triangle',
categories:[
{
name: 'cate1',
symbol: 'rect'
},
{
name: 'cate2',
symbol: 'circle'
}
],
data: node_data
}
]