echarts 流程图

先附图：

 代码如下：

let myCharts = echarts.init(document.getElementById("techCharts"));

     let charts = {

        nodes: [ // 节点

            {name: '流程1',value: [0, 500]},

            {name: '流程2',value: [150, 500]},

            {name: '流程3',value: [300, 500]},

            {name: '流程4',value: [450, 500]},

            {name: '流程5',value: [600, 500]},

            {name: '流程6',value: [750, 500]},

            {name: '流程7',value: [900, 500], symbol: "roundRect",symbolSize: [70, 40],},

            {name: '流程8',value: [450, 700]},

            {name: '流程9',value: [450, 300]},

            {name: '流程10',value: [150, 200], symbol: "diamond", symbolSize: [110, 60],},

        ],

        linesData: [ // 连线

           {name: '', coords:[[0,500],[130,500]]},

           {name: '', coords:[[175,500],[275, 500]]},

           {name: '', coords:[[275,500],[425, 500]]},

           {name: '', coords:[[425,500],[575, 500]]},

           {name: '', coords:[[575,500],[725, 500]]},

           {name: '', coords:[[725,500],[875, 500]]},

           {name: '', coords:[ // 关于折线要分两个方向，第一个方向无symbol

               [300,500],

               [300, 700]

            ], symbol: 'none'},

            {name: '', coords:[

               [300, 700],

               [425, 700]

            ]},

            {name: '', coords:[

               [475,700],

               [600, 700]

            ], symbol: 'none'},

            {name: '', coords:[

               [600, 700],

               [600, 545]

            ]},

            {name: '', coords:[

               [300,500],

               [300, 300]

            ], symbol: 'none'},

            {name: '', coords:[

               [300, 300],

               [425, 300]

            ]},

            {name: '', coords:[

               [425,300],

               [600, 300]

            ], symbol: 'none'},

            {name: '', coords:[

               [600, 300],

               [600, 455]

            ]},

            {name: '', coords:[

               [0,500],

               [0, 200]

            ], symbol: 'none'},

            {name: '不驳回', coords:[

               [0, 200],

               [120, 200]

            ]},

            {name: '驳回', coords:[

               [175, 200],

               [900, 200]

            ], symbol: 'none'},

            {name: '', coords:[

               [900, 200],

               [900, 455]

            ]},

        ]

     }

     let option = {

        xAxis: {

          min: 0,

          max: 1000,

          show: false,

          type: "value",

        },

        yAxis: {

          min: 0,

          max: 1000,

          show: false,

          type: "value",

        },

        grid: {

            left: 50,

            right: 0,

            bottom: 0,

            top: 0

        },

        tooltip: {

          show: false,

          axisPointer: {

            type: "shadow",

          },

          borderColor:"white",

          backgroundColor:"white",

          borderWidth: 1,

          padding: 5,

          textStyle: {

            fontSize: 14,

            color: '#333',

          },

        },

        series: [

          {

            type: "graph",

            coordinateSystem: "cartesian2d",

            symbol: "rect",

            symbolSize: [80, 40],

            // edgeSymbol: ['', 'arrow'],

            // edgeSymbolSize: [1, 10],

            lineStyle: {

                normal: {

                    width: 0,

                    color:'green'

                }

            },

             itemStyle: {

                 color: "rgb(194, 194, 194)",

             },

            symbolOffset:[10,0],

            force: {

                edgeLength: 100,//连线的长度

                repulsion: 150 //子节点之间的间距

            },

            label: {

              show: true,

              color: '#333', // 节点文字颜色

            },

            data: charts.nodes

          },

          {

            type: "lines",

            polyline: false,

            coordinateSystem: "cartesian2d",

            lineStyle: {

              // type: "dashed",

              opacity: 0.5,

              width: 3,

            },

            symbol: ['', 'arrow'],

            symbolSize : 10,

            label: {

              show: true,

              position: "middle",

              fontSize: 16,

              color: '#333',

              formatter: function (args) {

                let val = args.data.name;

                var strs = val.split("");

                var str = "";

                if (args.data.linkView) {

                  for (var i = 0, s; (s = strs[i++]); ) {

                    str += s;

                    if (!(i % 15)) str += "\n";

                  }

                  return str;

                }

                for (var i = 0, s; (s = strs[i++]); ) {

                  str += s;

                  if (!(i % 15)) str += "\n";

                }

                return str;

              },

            },

            lineStyle: {

                color: '#65B7E3',

                width: 2

            },

            data: charts.linesData,

          },

        ],

      };

      myCharts.clear();

      myCharts.setOption(option);