安利插件: echarts v4.0,本次讲解Graph即关系图有关的小技巧。
如果有朋友还不知道echarts这款插件,可以先到官网预览下看看效果图,兴许就有兴趣尝试开发图表了呢ヽ( ̄▽ ̄)ノ,此时此刻非常感谢百度前端大神的开源项目,工作中真的靠它吃饭呢,嘿嘿~
还有其他很不错的图表库此处先不列举了,本文只说工作中遇到的问题和解决方案。
echarts的关系图中有一项功能是开启节点联动效果的功能
由于项目需要,在处理关系图时要求在鼠标滑过连接线时不触发节点联动效果;
通过查阅相应API得出解决方案!
解决方案
效果图如下: https://gallery.echartsjs.com/editor.html?c=xS1zxDJSzX (可点击链接查看演示代码)
这里最关键的是通过绑定mouseover事件,判断触发的dataType是edge(线)还是node(节点),如果是edge就取消联动效果,否则开启。
至于触发节点联动效果的同时连接线变换颜色,可通过对lineStyle添加emphasis属性即可。
总结来讲,难度不大,只要仔细阅读API多加尝试就能找到解决办法。(๑◡๑)