option = {
backgroundColor:"rgba(19, 21, 44, 1)",
grid: {
left: '10%',
top: 60,
right: '10%',
bottom: 60,
},
series: [
{
type: 'graph',
layout: 'force',
force: {
initLayout: 'circular',
repulsion: 450,
edgeLength: 10,
layoutAnimation: true,
gravity: 0.1,
},
nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
// roam: true, //缩放
// draggable: true, //节点是否可以拖拽
focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
// edgeSymbol: ['circle', 'arrow'], //线2头标记
label: {
normal: {
show: true,
position: 'inside',
color: '#ffffff',
fontSize: 12,
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: 'rgba(90,90,137,1)',
},
val: {
color: 'rgba(90,90,137,1)',
lineHeight: 40,
align: 'center',
fontSize: 12,
},
},
},
},
edgeLabel: {
normal: {
show: false,
textStyle: {
fontSize: 12,
color: '#fff',
},
formatter: '{c}',
},
},
itemStyle: {
normal: {
// borderColor: '#04f2a7',
// borderWidth: 2,
// shadowBlur: 10,
shadowColor: '#04f2a7',
color: {
type: 'linear',
x: 0,
y: 0.24,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(20,16,132,1)', // 0% 处的颜色
},
{
offset: 0.52,
color: 'rgba(63,16,189,1)',
},
{
offset: 0.76,
color: 'rgba(145,51,247,1)',
},
{
offset: 1,
color: 'rgba(157,71,248,1)',
},
],
global: false, // 缺省为 false
},
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#3D11B6' },
{ offset: 1, color: '#9B26FB' },
]),
},
},
symbolKeepAspect: false,
data: [
{
name: 'Center',
symbolSize: 100,
label: {
normal: {
show: false,
position: 'inside',
},
},
showName: 'Center',
showVal: 'Center',
},
{
name: 'Chengdu',
symbolSize: 80,
label: {
normal: {
show: true,
position: 'inside',
},
},
showName: 'Chengdu',
showVal: '66',
label: {
normal: {
show: true,
position: 'inside',
color: '#ffffff',
fontSize: 28,
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: '#ffffff',
},
val: {
color: '#ffffff',
lineHeight: 90,
align: 'center',
fontSize: 28,
},
},
},
},
},
{
name: 'Deyang',
symbolSize: 80,
label: {
normal: {
show: true,
position: 'inside',
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: '#ffffff',
},
val: {
color: '#ffffff',
lineHeight: 90,
align: 'center',
fontSize: 28,
},
},
},
},
showName: 'Deyang',
showVal: '81',
},
{
name: 'Deyang ',
symbolSize: 80,
label: {
normal: {
show: true,
position: 'inside',
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: '#ffffff',
},
val: {
color: '#ffffff',
lineHeight: 90,
align: 'center',
fontSize: 28,
},
},
},
},
showName: 'Deyang',
showVal: '81',
},
{
name: 'Bazhong',
symbolSize: 80,
label: {
normal: {
show: true,
position: 'inside',
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: '#ffffff',
},
val: {
color: '#ffffff',
lineHeight: 90,
align: 'center',
fontSize: 28,
},
},
},
},
showName: 'Bazhong',
showVal: '74',
},
{
name: 'Chengdu ',
symbolSize: 80,
label: {
normal: {
show: true,
position: 'inside',
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: '#ffffff',
},
val: {
color: '#ffffff',
lineHeight: 90,
align: 'center',
fontSize: 28,
},
},
},
},
showName: 'Chengdu',
showVal: '80',
},
{
name: 'Mianyang',
symbolSize: 80,
label: {
normal: {
show: true,
position: 'inside',
formatter: function (data) {
// console.log(data);
return `{val|${data.data.showVal}}\n{name|${data.data.showName}}`;
},
rich: {
name: {
color: '#ffffff',
},
val: {
color: '#ffffff',
lineHeight: 90,
align: 'center',
fontSize: 28,
},
},
},
},
showName: 'Mianyang',
showVal: '74',
},
{
name: 'Storage',
symbolSize: 30,
showName: 'Storage',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '72',
},
{
name: 'Memory',
symbolSize: 30,
showName: 'Memory',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'CPU',
symbolSize: 30,
showName: 'CPU',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Storage2',
symbolSize: 30,
showName: 'Storage',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Memory2',
symbolSize: 30,
showName: 'Memory',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
showVal: '89',
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'CPU2',
symbolSize: 30,
showName: 'CPU',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Storage3',
symbolSize: 30,
showName: 'Storage',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Memory3',
symbolSize: 30,
showName: 'Memory',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'CPU3',
symbolSize: 30,
showName: 'CPU',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Storage4',
symbolSize: 30,
showName: 'Storage',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Memory4',
symbolSize: 30,
showName: 'Memory',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'CPU4',
symbolSize: 30,
showName: 'CPU',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Storage5',
symbolSize: 30,
showName: 'Storage',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Memory5',
symbolSize: 30,
showName: 'Memory',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'CPU5',
symbolSize: 30,
showName: 'CPU',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Storage6',
symbolSize: 30,
showName: 'Storage',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'Memory6',
symbolSize: 30,
showName: 'Memory',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
{
name: 'CPU6',
symbolSize: 30,
showName: 'CPU',
itemStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
label: {
normal: {
color: 'rgba(90,90,137,1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontWeight: 400,
},
},
showVal: '89',
},
],
links: [
{
source: 0,
target: 1,
},
{
source: 0,
target: 2,
},
{
source: 0,
target: 3,
},
{
source: 0,
target: 4,
},
{
source: 0,
target: 5,
},
{
source: 0,
target: 6,
},
{
source: 1,
target: 7,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 1,
target: 8,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 1,
target: 9,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 2,
target: 10,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 2,
target: 11,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 2,
target: 12,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 3,
target: 13,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 3,
target: 14,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 3,
target: 15,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 4,
target: 16,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 4,
target: 17,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 4,
target: 18,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 5,
target: 19,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 5,
target: 20,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 5,
target: 21,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 6,
target: 22,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 6,
target: 23,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
{
source: 6,
target: 24,
lineStyle: {
normal: {
color: 'rgba(19,19,44,1)',
},
},
},
],
},
],
};