Basic Graphecharts graph配置项内容和展示

      option = {
  title: {
    text: 'Basic Graph'
  },
  tooltip: {},
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      layout: 'none',
      symbolSize: 60,
      roam: true,
      label: {
        show: true,
        color:'#4381E4'
      },
      edgeSymbolSize: [8, 8],
      edgeLabel: {
        fontSize: 20
      },
      itemStyle: {
        color: '#fff',
        borderColor: '#5E8FC8',
        borderWidth: 2
      },
      data: [
        {
          name: 'Node 1',
          x: 0,
          y: 0,
          symbolSize: 70,
          itemStyle: {
            borderColor: '#B1CEF2',
            borderWidth: 6,
            color: '#4381E4',
          },
          label:{
            color:'#fff'
          }
        },
        {
          name: 'Node 2',
          x: -10,
          y: -20,
          color: '#5E8FC8'
        },
        {
          name: 'Node 3',
          x: 10,
          y: -20
        },
        {
          name: 'Node 4',
          x: -10,
          y: 20
        },
        {
          name: 'Node 5',
          x: -30,
          y: 20
        },
        {
          name: 'Node 6',
          x: 10,
          y: 20
        },
        {
          name: 'Node 7',
          x: 30,
          y: 20
        },
        {
          name: 'Node 8',
          x: 0,
          y: 40
        },
        {
          name: 'Node 9',
          x: -20,
          y: 40
        },
        {
          name: 'Node 10',
          x: 40,
          y: 40
        },
        {
          name: 'Node 11',
          x: -40,
          y: 40
        },
        {
          name: 'Node 12',
          x: 20,
          y: 40
        },
        {
          name: 'Node 13',
          x: 10,
          y: 60
        }
      ],
      links: [
        {
          source: 'Node 2',
          target: 'Node 1',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: -0.2,
            color: '#5E8FC8'
          },

          itemStyle: {
            symbolSize: 20
          }
        },
        {
          source: 'Node 3',
          target: 'Node 1',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: 0.2,
            color: '#5E8FC8'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 5',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: -0.2,
            color: '#5E8FC8'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 4',
          symbol: ['arrow', 'arrow'],
          lineStyle: {
            curveness: -0.2,
            color: '#D97E7D'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 4',
          symbol: ['arrow', 'arrow'],
          lineStyle: {
            curveness: -0.3,
            color: '#F0CD83'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 6',
          symbol: ['arrow', 'arrow'],
          lineStyle: {
            curveness: 0.2,
            color: '#F0CD83'
          }
        },
        {
          source: 'Node 6',
          target: 'Node 1',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: -0.3,
            color: '#5E8FC8'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 7',
          symbol: ['arrow', 'arrow'],
          lineStyle: {
            curveness: 0.2,
            color: '#A7C88C'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 11',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: -0.3,
            color: '#A7C88C'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 9',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: -0.3,
            color: '#5E8FC8'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 8',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: 0,
            color: '#F0CD83'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 10',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: 0.3,
            color: '#D97E7D'
          }
        },
        {
          source: 'Node 10',
          target: 'Node 1',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: -0.2,
            color: '#D97E7D'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 12',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: 0.3,
            color: '#5E8FC8'
          }
        },
        {
          source: 'Node 1',
          target: 'Node 13',
          symbol: ['', 'arrow'],
          lineStyle: {
            curveness: 0.1,
            color: '#5E8FC8'
          }
        }
      ],
      lineStyle: {
        opacity: 0.9,
        width: 1.5,
        curveness: 0
      },
      emphasis: {
          focus: 'adjacency',
          lineStyle: {
            opacity: 1,
            width: 3,
          }
        }
    }
  ]
};