这段时间一直在寻找可以实现前端元素动态连线的功能,找了好几个库,考虑过用d3或者原生svg和canvas来实现,最后和同项目的同事商量后决定使用jsPlumb插件库来做。
jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等,其实jsPlumb可能主要是用来做流程图的,它在实现这方面的功能上非常强大,我在项目中只使用了它少部分功能,来实现项目中连线的效果。
以上是初始化jsPlumb对象的函数。
接下来获取数据,加载页面的系统和编制模块。
初始化连接锚点
//自动连线
在vue使用echarts时,可能会遇到这样的问题,就是数据变化时,echarts不更新这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染
如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。
Vue提供了“watch”: