vue+jsplumb 实现根据数据渲染出连线绘图

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的浏览器，则使用VML技术。

以往文章
vue+jsplumb 实现连线绘图
vue3.x 使用jsplumb进行拖拽连线
jsplumb 点击节点或者连线高亮显示

下面介绍根据已知数据绘制连线
效果图

安装

npm install jsplumb --save

main.js 引入

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

示例代码

<template><div><div id="container"><div class="left"><ul><li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">{{item.name}}</li></ul></div><div class="right"><ul><li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">{{item.name}}</li></ul></div></div></div>
</template><script>export default {name: "jsplumbDemo",data() {return {jsPlumb: null, // 缓存实例化的jsplumb对象leftList:[{name: 'xxx_left_1', nodeId: 'left_1'},{name: 'xxx_left_2', nodeId: 'left_2'},{name: 'xxx_left_3', nodeId: 'left_3'},{name: 'xxx_left_4', nodeId: 'left_4'}],rightList:[{name: 'xxx_right_1', nodeId: 'right_1'},{name: 'xxx_right_2', nodeId: 'right_2'},{name: 'xxx_right_3', nodeId: 'right_3'},{name: 'xxx_right_4', nodeId: 'right_4'}],canvasData:{lineList: [{from: 'left_1',to: 'right_1',label: '连线名称1'},{from: 'left_1',to: 'right_3',label: '连线名称2'},{from: 'left_2',to: 'right_3',label: '连线名称3'},{from: 'left_4',to: 'right_4',label: '连线名称4'}]}}},mounted(){this.showPlumb();},methods:{showPlumb() {this.jsPlumb = this.$jsPlumb.getInstance({Container: 'container', // 选择器idEndpointStyle: {radius: 0.11, fill: '#999'}, // 端点样式PaintStyle: {stroke: '#999', strokeWidth: 2}, // 绘画样式，默认8px线宽  #456HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式  默认为nullConnectionOverlays: [ // 此处可以设置所有箭头的样式['Arrow', { // 设置参数可以参考中文文档location: 1,length: 12,paintStyle: {stroke: '#999',fill: '#999'}}]],Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等DrapOptions: {cursor: 'crosshair', zIndex: 2000}});// jsplumb连接参数const jsplumbConnectOptions ={isSource: true,isTarget: true,// 动态锚点、提供了4个方向 Continuous、AutoDefaultanchor: "Continuous",}// 初始化连线for (var i = 0; i < this.canvasData.lineList.length; i++) {let line = this.canvasData.lineList[i]let connection = this.jsPlumb.connect({source: line.from,target: line.to,}, jsplumbConnectOptions);connection.setLabel(line.label); //初始化label}},}}
</script><style>ul{list-style: none;}#container{width: 500px;height: 500px;padding: 20px;position: relative; /*一定加上这句，否则连线位置发生错乱*/}.left{float: left;width: 150px;}.right{float: right;width: 150px;}.left li,.right li{width: 100%;border-radius: 4px;border: 1px solid #ccc;background: #efefef;margin-bottom: 20px;padding: 8px 5px;}
</style>

vue+jsplumb 实现根据数据渲染出连线绘图相关推荐

Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
baidumap vue 判断范围_vue 数据渲染
本文转载于 SegmentFault 社区社区专栏:山外de楼作者:山外de楼前言 vue 是如何将编译器中的代码转换为页面真实元素的?这个过程涉及到模板编译成 AST 语法树,AST 语法树构建渲 ...
python画出K线图及技术指标
目录安装mplfinance及Ta-lib 画图安装mplfinance及Ta-lib mplfinance是基于matplotlib的金融数据可视化分析模块,前身是mpl_finance,比起m ...
Vue.js搭建移动端购物车界面－基本结构和数据渲染
本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3. 实时更新所选择物品的总 ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
Antd Table树形展示，分页后有时候数据渲染不出的问题
项目场景: Antd V4版网页端问题描述: 使用Table树形使用Card onTabChange 切换tab,有时候数据渲染不出的问题 const paginationProps = {Cu ...
Vue绘制折线图并渲染数据
本文讲解vue项目中使用ECharts快速绘制折线图,并将服务器传来的数据渲染上去,提供源代码,可以直接复制粘贴使用. 效果展示: Vue 通常使用ECharts 生成图表,官网地址: Apache ...
vue接口多个参数多个组件互动导致数据渲染混乱bug
问题 : 当接口参数太多时候, 组件太多的时候, 参数变化条件很多的时候会出现事件队列混乱, 数据混乱解决方法 : 1. 减少事件队列, 接口直接写到渲染数据的组件里, 不让接口数据在其它组件再传 ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...

vue+jsplumb 实现根据数据渲染出连线绘图

vue+jsplumb 实现根据数据渲染出连线绘图

vue+jsplumb 实现根据数据渲染出连线绘图相关推荐

最新文章

热门文章