echart 采坑_流程图节点间隙处理

当接到一个这样的流程并技术选型选了eachart之后，一顿操作自定义流程节点设置itemStyle.

 {
              
                    symbol: 'rect',
                    symbolSize: [148, 48],
                    label: {
                        formatter: '{icon|}{name| {b}}',
                        align: 'center',
                        rich: {
                            icon: {
                                height: 15,
                                width: 14,
                                backgroundColor: {
                                    image: this.flowIcon.normal,
                                },
                            },
                            name: {
                                color: this.nodeLableColor,
                                padding: [0, 0, 0, 8],
                                fontSize: 14,
                            },
                        },
                    },
                    itemStyle: {
                        backgroundColor: '#f5f5f5',
                        borderColor: '#ccc',
                        borderWidth: 1,
                        borderType: 'solid',
                      
                    },

这样配置的关系图样式如下所示：

节点与线之间存在间隙，不太美观；于是我查阅API找到参数  [force]及[force.repulsion] [force.edgeLength]....参数试图修改相关配置。

series-graph.force

force配置表示在力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，达到整个模型的能量最小化节点相对聚合。

series-graph.force.repulsion

节点之间的斥力因子

series-graph.force.edgeLength

边的两个节点之间的距离，这个距离也会受 [repulsion]参数影响

支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例

// 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
edgeLength: [10, 50]

但这些参数对显示效果没有丝毫影响。

甚至也试过对关系图上lineStyle的cap,join,miterLimit进行设置效果也是依旧。

最后为了解决问题换一个思路，就是对节点label 动手设置自定义宽高使节点在肉眼层面看起来和设计图一致，其实真正的节点symbol节点较小.

           {
            
                symbolSize: [70, 30],
                label: {
                    formatter: '{icon|}{name| {b}}',
                    backgroundColor: '#f5f5f5',
                    borderColor: '#ccc',
                    height: 48,
                    lineHeight: 48,
                    borderWidth: 1,
                    borderType: 'solid',
                    width: 184,
                    align: 'center',
                    rich: {
                        icon: {
                            height: 15,
                            width: 14,
                            backgroundColor: {
                                image: this.flowIcon.normal,
                            },
                        },
                        name: {
                            color: this.nodeLableColor,
                            padding: [0, 0, 0, 8],
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    color: 'transparent',
                },
                tooltip: { show: false },
            },
  `                
  

       此文仅记录采坑过程也只是解决了问题，但对造成此问题的原因一知半解，欢迎各路大神指导修正