echarts graph配置项内容和展示
配置项如下
option = {
series: [
{
type: 'graph',
symbol: 'rect',
symbolSize: [150, 60],
itemStyle:{
color:'#aaaaff'
},
label: {
show: true,
fontSize: 20,
},
data: [
{
name: '战略规划',
x: 1,
y: 1,
},
{
name: '1',
symbolSize: 1,
label: {
show: false,
},
x: 25,
y: 1,
},
{
name: '2',
symbolSize: 1,
label: {
show: false,
},
x: 25,
y: 20,
},
{
name: '3',
symbolSize: 1,
label: {
show: false,
},
x: 25,
y: 40,
},
{
name: '4',
symbolSize: 1,
label: {
show: false,
},
x: 25,
y: 60,
},
{
name: '5',
symbolSize: 1,
label: {
show: false,
},
x: 25,
y: 30,
},
{
name: '6',
symbolSize: 1,
label: {
show: false,
},
x: 80,
y: 1,
},
{
name: '7',
symbolSize: 1,
label: {
show: false,
},
x: 80,
y: 20,
},
{
name: '8',
symbolSize: 1,
label: {
show: false,
},
x: 80,
y: 40,
},
{
name: '9',
symbolSize: 1,
label: {
show: false,
},
x: 80,
y: 60,
},
{
name: '10',
symbolSize: 1,
label: {
show: false,
},
x: 80,
y: 30,
},
{
name: '11',
symbolSize: 1,
label: {
show: false,
},
x: 38,
y: 30,
},
{
name: '12',
symbolSize: 1,
label: {
show: false,
},
x: 88,
y: 1,
},
{
name: '13',
symbolSize: 1,
label: {
show: false,
},
x: 88,
y: 20,
},
{
name: '14',
symbolSize: 1,
label: {
show: false,
},
x: 88,
y: 40,
},
{
name: '15',
symbolSize: 1,
label: {
show: false,
},
x: 88,
y: 60,
},
{
name: '16',
symbolSize: 1,
label: {
show: false,
},
x: 90,
y: 60,
},
{
name: '17',
symbolSize: 1,
label: {
show: false,
},
x: 50,
y: 75,
},
{
name: '18',
symbolSize: 1,
label: {
show: false,
},
x: 38,
y: 80,
},
{
name: '19',
symbolSize: 1,
label: {
show: false,
},
x: 62,
y: 80,
},
{
name: '20',
symbolSize: 1,
label: {
show: false,
},
x: 120,
y: 1,
},
{
name: '21',
symbolSize: 1,
label: {
show: false,
},
x: 120,
y: 20,
},
{
name: '22',
symbolSize: 1,
label: {
show: false,
},
x: 120,
y: 40,
},
{
name: '24',
symbolSize: 1,
label: {
show: false,
},
x: 120,
y: 80,
},
{
name: '23',
symbolSize: 1,
label: {
show: false,
},
x: 120,
y: 60,
},
{
name: '25',
symbolSize: 1,
label: {
show: false,
},
x: -20,
y: 1,
},
{
name: '26',
symbolSize: 1,
label: {
show: false,
},
x: -20,
y: 20,
},
{
name: '27',
symbolSize: 1,
label: {
show: false,
},
x: -20,
y: 40,
},
{
name: '28',
symbolSize: 1,
label: {
show: false,
},
x: -20,
y: 60,
},
{
name: '29',
symbolSize: 1,
label: {
show: false,
},
x: -20,
y: 80,
},
{
name: '30',
symbolSize: 1,
label: {
show: false,
},
x: 50,
y: 90,
},
{
name: '产业规划',
x: 1,
y: 20,
},
{
name: '开发策划',
x: 1,
y: 40,
},
{
name: '招商策划',
x: 1,
y: 60,
},
{
name: '总体规划',
x: 100,
y: 1,
},
{
name: '分区规划',
x: 100,
y: 20,
},
{
name: '控制性详细规划',
x: 100,
y: 40,
},
{
name: '修改性详细规划',
x: 100,
y: 60,
},
{
name: '行动计划',
x: 50,
y: 1,
},
{
name: '概念规划',
x: 50,
y: 30,
},
{
name: '园区运营',
x: 50,
y: 60,
},
{
name: '开发建设',
x: 50,
y: 80,
},
{
name: '招商运营',
x: 50,
y: 95,
},
{
name: '咨询策划',
x: 10,
y: 75,
itemStyle:{
color:"#fff"
},
symbolSize:1,
label:{
fontWeight:"bold",
color:"#000"
}
},
{
name: '规划设计',
x: 90,
y: 75,
itemStyle:{
color:"#fff"
},
symbolSize:1,
label:{
fontWeight:"bold",
color:"#000"
}
},
],
links: [
{
source: 25,
target: 1,
},
{
source: 26,
target: 2,
},
{
source: 27,
target: 3,
},
{
source: 28,
target: 4,
},
{
source: 29,
target: 25,
},
{
source: 29,
target: 18,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: 1,
target: 4,
},
{
source: 5,
target: 11,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: 6,
target: 9,
},
{
source: 6,
target: 12,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: 7,
target: 13,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: 8,
target: 14,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: 9,
target: 15,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: '概念规划',
target: 10,
},
{
source: 12,
target: 20,
},
{
source: 13,
target: 21,
},
{
source: 14,
target: 22,
},
{
source: 15,
target: 24,
},
{
source: 20,
target: 23,
},
{
source: 23,
target: 19,
symbol:["none","arrow"],
symbolSize:20,
},
{
source: '概念规划',
target: 17,
symbol:["none","arrow"],
symbolSize:15,
},
{
source: '开发建设',
target: 30,
symbol:["none","arrow"],
symbolSize:15,
},
],
lineStyle: {
color: '#aaaaff',
width: 2,
},
},
],
};
截图如下
