vue中使用cytoscape.js支持边的颜色自定义

如下：根据类型定义边的颜色

1.定义边的样式edge定义多组selector样式根据指定的type值匹配

self.cy = cytoscape({
                container: document.getElementById('photo'),
                layout: {
                    fit: false,
                    name: 'concentric',//这是控制图形形状的
                    padding: 30, // the padding on fit
                    animate: false,
                    minNodeSpacing: 80,//控制大小
                    maxNodeSpacing: 120,//控制大小
                },
                
                style: [{selector: 'node',
                        css: {
                            'curve-style': 'bezier',
                            'label':'data(nodename)',
                            'background-image': 'data(color)',
                            'background-fit': 'cover',
                            'color':'data(textColor)',
                            'width': 40,
                            'height': 40,
                            // 'font-size':14
                        }
                    },
                    {selector: 'edge',
                        css: {
                            'curve-style': 'bezier',
                            'label':'data(percentum)',
                            'width': 1,
                            'line-color': self.color,
                            //'font-size':14
                        }
                    },
                    {
                        selector: 'edge[type="default"]',
                        style: {
                            'line-color': 'green',
                            'target-arrow-color': 'green',
                        }
                    },
                    {
                        selector: 'edge[type="yes"]',
                        style: {
                            'line-color': '#000',
                            'target-arrow-color': '#000',
                        }
                    },
                    {
                        selector: 'edge[type="no"]',
                        style: {
                            'line-color': '#ED1000',
                            'target-arrow-color': '#ED1000',
                        }
                    },
                ],
                elements: {
                    nodes: dataA,
                    edges: dataB
                }
            });

2。然后在添加节点边数据时，在边的数组循环遍历时加上type值