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来控制节点大小,这种方式可以根据需要采纳。