关系图表之流程图

描述:当前是关于Echarts图表中的 关系图 示例。
 
            option = {
  tooltip: {},
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      layout: 'none',
      symbolSize: 90,
      roam: true,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#157eff'
            },
            {
              offset: 1,
              color: '#35c2ff'
            }
          ])
        }
      },
      label: {
        show: true,
        color: '#fff',
        fontSize: '12'
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 14,
        show:true,
        color: '#666',
        formatter: (params) => {
          return params.data.name || ''
        }
      },
      data: [
        {
          name: '消息接入',
          x: 500,
          y: 100
        },
        {
          name: '通用反馈包发送',
          x: 400,
          y: 200
        },
        {
          name: '审核通过',
          x: 600,
          y: 208
        },
        {
          name: '业务分析',
          x: 600,
          y: 300
        },
        {
          name: '查询指令',
          x: 520,
          y: 340
        },
        {
          name: '业务指令',
          x: 690,
          y: 340
        }
      ],
      links: [
        {
          source: '消息接入',
          target: '通用反馈包发送',
        },
        {
          source: '审核通过',
          target: '业务分析',
        },
        {
          source: '消息接入',
          target: '审核通过',
          name: '消息接入'
        },
        {
          source: '业务分析',
          target: '查询指令'
        },
        {
          source: '业务分析',
          target: '业务指令'
        }
      ],
      lineStyle: {
        color: '#12b5d0',
        opacity: 0.9,
        width: 1,
        curveness: 0,
        type: 'dashed'
      }
    }
  ]
};