Echarts在线免费图表

 
            option = {
   title: {
      text: '流程图',
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        type: 'graph',
        layout: 'none',
        symbol: 'rect',
        symbolSize: [150, 70],
        roam: false,
        label: {
          show: true,
          color: '#fff',
          fontSize: 16,
          formatter: function (params) {
            if (params.name.length > 9) {
              return params.name.replace(/(.{9})/g, '$1\n');
            } else {
              return params.name;
            }
          }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
          fontSize: 20
        },
        data: [
          {
            id:'0',
            name: '生产任务发送',
            x: 300,
            y: 100,
            itemStyle: {
              borderWidth: 2,
              color: '#5b9bd5',
            }
          },
          {
            id:'1',
            name: '生产部门生产',
            x: 300,
            y: 300,
            itemStyle: {
              borderWidth: 2,
              color: '#5b9bd5',
            }
          },
          {
            id:'2',
            name: '质检科检查',
            x: 300,
            y: 500,
            itemStyle: {
              borderWidth: 6,
              color: '#5b9bd5',
              borderColor: "red",
            }
          },
          {
            id:'3',
            name: '数据归档申请',
            x: 300,
            y: 700,
            itemStyle: {
              borderWidth: 2,
              color: '#5b9bd5',
            }
          },
          {
            id:'4',
            name: '数据管理与服务中心审批归档',
            x: 300,
            y: 900,
            itemStyle: {
              borderWidth: 2,
              color: '#5b9bd5',
            }
          }
        ],
        links: [
          {
            source: '0',
            target: '1'
          },
          {
            source: '1',
            target: '2'
          },
          {
            source: '2',
            target: '3'
          },
          {
            source: '3',
            target: '4'
          }
        ],
        lineStyle: {
          color: '#5b9bd5',
          width: 2,
          curveness: 0,
          arrowLength: 10
        },
        itemStyle: {
          borderWidth: 2,
        }
      }
    ]
};