echarts中graph控制节点大小

1、根据value值控制节点大小

1.1 效果

1.2 代码控制

    option = {
        series: [{
            type: 'graph',
            layout: 'force',
            
            label: {
                normal: {
                    show: true,
              position: 'top',//设置label显示的位置
              // formatter: '{c}',//设置label读取的值为value
              textStyle: {
                fontSize: '12rem'
              },
                }
            },
             symbolSize: (value, params) => {
            console.log(value);
            console.log(params);
            return value;
          },
            draggable: true,
            data:[
            { category: 0, name: "八年级数学知识结构体系",value:35 },
            { name: "三角形",value:30  },
            { name: "全等三角形",value:25  },
            { name: "轴对称",value:20  },
            { name: "整式的乘法与因式分解" ,value:15 },
            { name: "分式" ,value:10 },
            { name: "二次根式",value:6  },
            { name: "勾股定理",value:6  },
            { name: "平行四边形",value:6  },
            { name: "一次函数",value:6  },
            { name: "数据的分析" ,value:6 },
            ],
            force: {
                edgeLength: 50,
                repulsion: 200,
                gravity: 0.1
            },
            links:[
            { source: "八年级数学知识结构体系", target: "三角形" },
            { source: "八年级数学知识结构体系", target: "全等三角形" },
            { source: "八年级数学知识结构体系", target: "轴对称" },
            { source: "八年级数学知识结构体系", target: "整式的乘法与因式分解" },
            { source: "八年级数学知识结构体系", target: "分式" },
            { source: "八年级数学知识结构体系", target: "二次根式" },
            { source: "八年级数学知识结构体系", target: "勾股定理" },
            { source: "八年级数学知识结构体系", target: "平行四边形" },
            { source: "八年级数学知识结构体系", target: "一次函数" },
            { source: "八年级数学知识结构体系", target: "数据的分析" },
        ],
        }]
    };

    myChart.setOption(option);

2、根据graph中params自定义节点大小

2.1 效果

2.2 代码控制

    option = {
        series: [{
            type: 'graph',
            layout: 'force',
            label: {
                normal: {
                    show: true,
                    position: 'top',//设置label显示的位置
                    textStyle: {
                    fontSize: '12rem'
                    },
                }
            },
             symbolSize: (value, params) => {
                //根据数据params中的data来判定数据大小
                switch (params.data.category) {
                    case 0:return 50;break;
                    case 1:return 30;break;
                    case 2:return 20;break;
                    default:return 10;
                    };
            },
            draggable: true,
            data:[
            {name: "八年级数学知识结构体系",category:0 },
            { name: "三角形",category:1  },
            { name: "全等三角形",category:1  },
            { name: "轴对称",category:1  },
            { name: "整式的乘法与因式分解" ,category:1 },
            { name: "分式" ,category:1},
            { name: "二次根式",category:1  },
            { name: "勾股定理",category:1  },
            { name: "平行四边形",category:1  },
            { name: "一次函数",category:1  },
            { name: "数据的分析" ,category:1 },
            { name: "三角形1",category:2  },
            { name: "四边形1",category:2  },
            { name: "函数1",category:2  },
            { name: "数据分析1" ,category:2 },
            { name: "三角形2",category:2  },
            { name: "四边形2",category:3  },
            { name: "函数2",category:3  },
            { name: "数据分析2" ,category:3 },
            ],
            force: {
                edgeLength: 100,
                repulsion: 500,
                gravity: 0.1
            },
            links:[
            { source: "八年级数学知识结构体系", target: "三角形" },
            { source: "八年级数学知识结构体系", target: "全等三角形" },
            { source: "八年级数学知识结构体系", target: "轴对称" },
            { source: "八年级数学知识结构体系", target: "整式的乘法与因式分解" },
            { source: "八年级数学知识结构体系", target: "分式" },
            { source: "八年级数学知识结构体系", target: "二次根式" },
            { source: "八年级数学知识结构体系", target: "勾股定理" },
            { source: "八年级数学知识结构体系", target: "平行四边形" },
            { source: "八年级数学知识结构体系", target: "一次函数" },
            { source: "八年级数学知识结构体系", target: "数据的分析" },
            { source: "三角形", target: "三角形1" },
            { source: "平行四边形", target: "四边形1" },
            { source: "一次函数", target: "函数1" },
            { source: "数据的分析", target: "数据分析1" },
            { source: "全等三角形", target: "三角形2" },
            { source: "四边形1", target: "四边形2" },
            { source: "函数1", target: "函数2" },
            { source: "数据分析1", target: "数据分析2" },
        ],
        }]
    };
    myChart.setOption(option);

3 相关讲解链接

echarts中设置节点大小symbolSize函数：http://echarts.baidu.com/option.html#series-graph.symbolSize

相关echarts手动添加节点：http://blog.csdn.net/zfan520/article/details/78979009

4、结束语

通过symbolSize设置节点大小，可以根据力的作用，控制节点转动速度，同时可以根据节点的category来控制节点大小，这种方式可以根据需要采纳。