option = {
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#157eff'
}, {
offset: 1,
color: '#35c2ff'
}]),
},
shadowBlur: 10
},
textStyle: {
color: '#333',
fontSize: 16,
fontWeight: 600,
},
legend: [{
formatter: function (name) {
return echarts.format.truncateText(name, 200, '12px', '…');
},
tooltip: {
show: true
},
selectedMode: 'false',
bottom: 20,
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
xAxis: {
show: false,
type: 'value'
},
yAxis: {
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
legendHoverLink: false,
hoverAnimation: true,
nodeScaleRatio: false,
//建头
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 8],
edgeLabel: {
show: false,
normal: {
show: true,
position: 'middle',
textStyle: {
fontSize: 12
},
formatter: "{c}"
}
},
lineStyle: {
width: 2
},
focusNodeAdjacency: true,
roam: false,
//圆形上面的文字
label: {
normal: {
position: "inside",
show: true,
textStyle: {
fontSize: 12,
color: '#fff'
},
}
},
itemStyle: {
normal: {
// 设置扇形的阴影
shadowBlur: 30,
shadowColor: '#fff',
color: '#4468f0',
borderColor: '#d7dffb',
borderWidth: 2
},
shadowBlur: 10,
},
lineStyle: {
normal: {
width: 2,
shadowColor: 'none',
color: '#143ac8'
},
},
data: [
{
name: "开始",
draggable: false,
symbolSize: [20, 20],
fixed: true,
value: [0, 150],
itemStyle: {
normal: {
color: ['#2dd131'],
borderColor: 'rgb(204,251,222)',
borderWidth: 5
}
},
label: {
position: 'bottom',
color: '#333'
},
},
{
name: "输出端",
draggable: false,
symbol: 'path://M19.300,3.300 L253.300,3.300 C262.136,3.300 269.300,10.463 269.300,19.300 L269.300,21.300 C269.300,30.137 262.136,37.300 253.300,37.300 L19.300,37.300 C10.463,37.300 3.300,30.137 3.300,21.300 L3.300,19.300 C3.300,10.463 10.463,3.300 19.300,3.300 Z',
symbolSize: [90, 20],
fixed: true,
value: [40, 150]
}, {
name: "总中心",
draggable: false,
symbol: "rect",
symbolSize: [90, 30],
fixed: true,
value: [80, 150]
}, {
name: "地方1",
value: [200, 205],
draggable: false,
fixed: true,
symbolSize: 60,
itemStyle: {
normal: {
color: ['#9b63e7'],
borderColor: '#e1d0f8',
borderWidth: 5
}
}
}, {
name: "地方2",
value: [200, 150],
draggable: false,
fixed: true,
symbolSize: 60,
itemStyle: {
normal: {
color: ['#ff3e3e'],
borderColor: '#ffc5c5',
borderWidth: 5
}
}
}, {
name: "地方3",
value: [200, 95],
draggable: false,
symbolSize: 60,
itemStyle: {
normal: {
color: ['#2dd131'],
borderColor: '#c0f1c1',
borderWidth: 5
}
}
},
//节点B,C,D ....n
{
name: "中心1",
symbol: "rect",
symbolSize: [90, 30],
draggable: false,
value: [300, 205]
}, {
name: "中心2",
symbol: "rect",
symbolSize: [90, 30],
draggable: false,
value: [300, 150]
}, {
name: "中心3",
symbol: "rect",
symbolSize: [90, 30],
draggable: false,
value: [300, 95]
}, {
name: "接收端",
symbol: "rect",
symbolSize: [100, 30],
draggable: false,
value: [400, 150]
}, {
name: "结束",
symbolSize: [20, 20],
draggable: false,
value: [460, 150],
itemStyle: {
normal: {
color: ['#8c8c8c'],
borderColor: 'rgb(233,234,235)',
borderWidth: 5
}
},
label: {
position: 'bottom',
color: '#333'
}
}
],
links: [
{
source: "开始",
value: '',
target: "输出端",
lineStyle: {
normal: {
color: "#143ac8"
}
}
}, {
source: "输出端",
value: '',
target: "总中心",
lineStyle: {
normal: {
color: "#143ac8"
}
}
}, {
source: "总中心",
value: " ",
target: "地方1",
lineStyle: {
normal: {
color: "#ff3e3e",
curveness: 0.2
}
}
}, {
source: "总中心",
value: " ",
target: "地方2",
lineStyle: {
normal: {
color: "#ff3e3e"
}
}
}, {
source: "总中心",
value: " ",
target: "地方3",
lineStyle: {
normal: {
color: "#ff3e3e",
curveness: -0.2
}
}
}, {
source: "地方1",
value: " ",
target: "中心1",
lineStyle: {
normal: {
color: "#bbbbbb",
type: 'dashed'
}
}
}, {
source: "地方2",
value: " ",
target: "中心2",
lineStyle: {
normal: {
color: "#4468f0"
}
}
}, {
source: "地方3",
value: " ",
target: "中心3",
lineStyle: {
normal: {
color: "#4468f0"
}
}
}, {
source: "中心1",
value: " ",
target: "接收端",
lineStyle: {
normal: {
curveness: 0.2,
type: 'dashed',
color: "#bbbbbb"
}
}
}, {
source: "中心2",
value: " ",
target: "接收端",
lineStyle: {
normal: {
type: 'dashed',
color: "#bbbbbb"
}
}
}, {
source: "中心3",
value: " ",
target: "接收端",
lineStyle: {
normal: {
color: "#4468f0",
curveness: -0.2
}
}
}, {
source: "接收端",
value: " ",
target: "结束",
lineStyle: {
normal: {
color: "#908f8f"
}
}
}]
}]
}