cytoscape.js在vue项目中的安装及案例

Posted 2021-01-28 会飞的小蜜蜂

1. 安装：

npm i cytoscape --save

2. 引入：main.js

import cytoscape from \'cytoscape\';
Vue.prototype.$cytoscape = cytoscape;

3. demo代码：

<template>
    <div id="MainCy" style="width: 100%;height: 100%;"></div>
</template>
<script>
    export default {
        mounted() {
            var cy = this.$cytoscape({
                container: document.getElementById(\'MainCy\'),

                layout: {
                    name: \'grid\',
                    rows: 2,
                    cols: 2
                },

                style: [{
                        selector: \'node\',
                        style: {
                            \'content\': \'data(name)\',
                            \'background-color\': \'magenta\',
                            \'background-image\': \'url(img/shixian.png)\',
                        }
                    },

                    {
                        selector: \'edge\',
                        style: {
                            \'content\': \'data(relationship)\',
                            \'curve-style\': \'bezier\',
                            \'target-arrow-shape\': \'triangle\',
                            \'color\': \'red\',
                        }
                    },

                    // some style for the extension

                    {
                        selector: \'.eh-handle\',
                        style: {
                            \'background-color\': \'red\',
                            \'width\': 12,
                            \'height\': 12,
                            \'shape\': \'ellipse\',
                            \'overlay-opacity\': 0,
                            \'border-width\': 12, // makes the handle easier to hit
                            \'border-opacity\': 0
                        }
                    },

                    {
                        selector: \'.eh-hover\',
                        style: {
                            \'background-color\': \'red\'
                        }
                    },

                    {
                        selector: \'.eh-source\',
                        style: {
                            \'border-width\': 2,
                            \'border-color\': \'red\'
                        }
                    },

                    {
                        selector: \'.eh-target\',
                        style: {
                            \'border-width\': 2,
                            \'border-color\': \'red\'
                        }
                    },

                    {
                        selector: \'.eh-preview, .eh-ghost-edge\',
                        style: {
                            \'background-color\': \'red\',
                            \'line-color\': \'red\',
                            \'target-arrow-color\': \'red\',
                            \'source-arrow-color\': \'red\'
                        }
                    },

                    {
                        selector: \'.eh-ghost-edge.eh-preview-active\',
                        style: {
                            \'opacity\': 0
                        }
                    }
                ],

                elements: {
                    nodes: [{
                            data: {
                                id: \'j\',
                                name: \'Jerry\'
                            }
                        },
                        {
                            data: {
                                id: \'e\',
                                name: \'Elaine\'
                            }
                        },
                        {
                            data: {
                                id: \'k\',
                                name: \'Kramer\'
                            }
                        },
                        {
                            data: {
                                id: \'g\',
                                name: \'George\'
                            }
                        }
                    ],
                    edges: [{
                            data: {
                                source: \'j\',
                                target: \'e\'
                            }
                        },
                        {
                            data: {
                                source: \'j\',
                                target: \'k\'
                            }
                        },
                        {
                            data: {
                                source: \'j\',
                                target: \'g\'
                            }
                        },
                        {
                            data: {
                                source: \'e\',
                                target: \'j\'
                            }
                        },
                        {
                            data: {
                                source: \'e\',
                                target: \'k\',
                                relationship: \'1\'
                            }
                        },
                        {
                            data: {
                                source: \'k\',
                                target: \'j\',
                                relationship: \'2\'
                            }
                        },
                        {
                            data: {
                                source: \'k\',
                                target: \'e\',
                                relationship: \'3\'
                            }
                        },
                        {
                            data: {
                                source: \'k\',
                                target: \'g\',
                                relationship: \'4\'
                            }
                        },
                        {
                            data: {
                                source: \'g\',
                                target: \'j\',
                                relationship: \'5\'
                            }
                        }
                    ]
                }
            });
            cy.nodes().on(\'click\', (evt) => {
                console.log(evt)
            });
            cy.edges().on(\'click\', (evt) => {
                console.log(evt)
            });


        },
    }
</script>

demo效果：