【绘图杂记13】Echarts绘制网络图
作者：互联网
最终效果
force
circular
数据准备
对应位置
代码
option = {
title: {
text: '关系图（数据为虚构）',
subtext: '卖山楂啦prss',
textStyle: {
color: '#000',
fontSize: 20,
},
},
tooltip: {
trigger: 'item',
formatter: function(x) {
return x.data.label; //设置提示框的内容和格式 节点和边都显示name属性
},
},
toolbox: {
show: true,
feature: {
dataView: {show:true},
saveAsImage: {
//excludeComponents :['toolbox'],
pixelRatio: 5
}
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'force', // 'circular' ,force
symbolSize: 3, //图形的大小（示例中的圆的大小）
roam: true, //鼠标缩放及平移
//focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点、节点的边和邻接节点
//力引导布局相关的配置项
//通过修改layout属性，分别绘制一个力引导图和一个圆形的图。
// 'circular' ,force
force: {
x: 'center',
y: '50px',
edgeLength: 280,//线的长度，这个距离也会受 repulsion，支持设置成数组表达边长的范围
gravity:0.02,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
//repulsion 节点之间的斥力因子，这项可以设置为数组形式，不同大小的值会线性映射到不同的斥力，值越大则斥力越大。
//repulsion: 8000//节点之间的斥力因子。值越大则斥力越大
//initLayout：进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。
},
// edgeSymbol: ['circle', 'arrow'],//箭头
// edgeSymbolSize: [6, 10],
data: [ //节点数据
{
name: '猪八戒',
label: '',
draggable: true, //能否鼠标拖动
category: '猪八戒',
symbolSize: 18,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},}, //猪八戒
{
name: '后裔',
label: '',
draggable: true, //能否鼠标拖动
category: '后裔',
symbolSize: 17,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: 'right',
fontSize: 15,
color: 'black',
},
},},//后裔
{
name: '铁扇公主',
label: '',
draggable: true, //能否鼠标拖动
category: '铁扇公主',
symbolSize: 10,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},},//铁扇公主
{
name: '牛魔王',
label: '',
draggable: true, //能否鼠标拖动
category: '牛魔王',
symbolSize: 14,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},},//牛魔王
{
name: '女儿国国王',
label: '',
draggable: true, //能否鼠标拖动
category: '女儿国国王',
symbolSize: 9,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//女儿国国王
{
name: '蝎子精',
label: '',
draggable: true, //能否鼠标拖动
category: '蝎子精',
symbolSize: 8,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//蝎子精
{
name: '孔雀公主',
label: '',
draggable: true, //能否鼠标拖动
category: '孔雀公主',
symbolSize: 13,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//孔雀公主
{
name: '大鹏',
label: '',
draggable: true, //能否鼠标拖动
category: '大鹏',
symbolSize: 16,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//大鹏
{
name: '玉免精',
label: '',
draggable: true, //能否鼠标拖动
category: '玉免精',
symbolSize: 11,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//玉免精
{
name: '唐僧',
label: '',
draggable: true, //能否鼠标拖动
category: '唐僧',
symbolSize: 19,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//唐僧
{
name: '王母娘娘',
label: '',
draggable: true, //能否鼠标拖动
category: '王母娘娘',
symbolSize: 11,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//王母娘娘
{
name: '玉皇太帝',
label: '',
draggable: true, //能否鼠标拖动
category: '玉皇太帝',
symbolSize: 5,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//玉皇太帝
{
name: '玉面狐狸',
label: '',
draggable: true, //能否鼠标拖动
category: '玉面狐狸',
symbolSize: 13,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//玉面狐狸
{
name: '高老庄老婆',
label: '',
draggable: true, //能否鼠标拖动
category: '高老庄老婆',
symbolSize: 10,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//高老庄老婆
{
name: '嫦娥',
label: '',
draggable: true, //能否鼠标拖动
category: '嫦娥',
symbolSize: 13,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//嫦娥
{
name: '观音',
label: '',
draggable: true, //能否鼠标拖动
category: '观音',
symbolSize: 16,
label: {
normal: {
show: true, //控制非高亮时节点名称是否显示
position: '',
fontSize: 20,
color: 'black',
},
},
},//观音
],
links: [ //连线数据
{
source:'猪八戒',
target:'嫦娥',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:15,
color:'target',//设置为’source’时是与起点颜色相同，’target’是与终点颜色相同。
curveness: 0.2, //边的曲度，支持从 0 到 1 的值，值越大曲度越大，也可设置为直线
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//猪八戒--嫦娥
{
source:'猪八戒',
target:'高老庄老婆',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:15,
color:'target',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.6',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//猪八戒--高老庄老婆
{
source:'猪八戒',
target:'观音',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:8,
color:'target',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.8',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//猪八戒--观音
{
source:'后裔',
target:'嫦娥',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:11,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.6',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//后裔--嫦娥
{
source:'铁扇公主',
target:'牛魔王',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:10,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//铁扇公主--牛魔王
{
source:'牛魔王',
target:'玉面狐狸',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:6,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//牛魔王--玉面狐狸
{
source:'女儿国国王',
target:'唐僧',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:22,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.6',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//女儿国国王--唐僧
{
source:'蝎子精',
target:'唐僧',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:11,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//蝎子精--唐僧
{
source:'孔雀公主',
target:'唐僧',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:16,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//孔雀公主--唐僧
{
source:'大鹏',
target:'唐僧',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:5,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//大鹏--唐僧
{
source:'玉免精',
target:'唐僧',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:10,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.6',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//玉免精--唐僧
{
source:'唐僧',
target:'观音',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:1,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.4',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//唐僧--观音
{
source:'王母娘娘',
target:'玉皇太帝',
value:'',
label:'',
lineStyle: {
normal: {
show:true,
width:1,
color:'source',
curveness: 0.2,
type :'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
opacity :'0.8',
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
}
},//王母娘娘--玉皇太帝
],
categories: [ //节点数据
{
name: '猪八戒',
icon: 'circle'
},
{
name: '嫦娥',
icon: 'circle'},
{
name: '后裔',
icon: 'circle'},
{
name: '铁扇公主',
icon: 'circle',
},
{
name: '牛魔王',
icon: 'circle'
},
{
name: '女儿国国王',
icon: 'circle'
},
{
name: '蝎子精',
icon: 'circle'
},
{
name: '孔雀公主',
icon: 'circle'
},
{
name: '大鹏',
icon: 'circle'
},
{
name: '玉免精',
icon: 'circle'
},
{
name: '唐僧',
icon: 'circle'
},
{
name: '王母娘娘',
icon: 'circle'
},
{
name: '玉皇太帝',
icon: 'circle'
},
{
name: '玉面狐狸',
icon: 'circle'
},
{
name: '高老庄老婆',
icon: 'circle'
},
{
name: '观音',
icon: 'circle'
},],}
]
};
标签：13,name,show,color,normal,label,网络图,true,Echarts 来源： https://blog.csdn.net/qq_42374697/article/details/112917340