给echarts力导向布局图增加滚动条。

连线点击事件/样式/标注文字及源代码。今天介绍一下怎么给echarts力导向布局图增加滚动条。

全部的demo代码下载：http://pan.baidu.com/s/1jGzEb6u。

预览界面：http://www.suchso.com/code/KFdemo/force.html

echarts力导向布局图是没有滚动条功能的。力导向布局图的本意不是做人物关系图，所以当作人物关系图使用的时候，

就会出现问题。数据太多，就会罩住了。所以考虑增加个滚动条。

思路：

如果只是在html中增加滚动条是完全没问题。但是echarts是基于zrender，zrender是基于html5的。html5的canvas是没有滚动条选项的。

需要自己给他计算滚动条。

1、提供是否展示滚动条的选项：isShowScrollBar

2、根据参数构建滚动条： if(option.isShowScrollBar) _buildScrollBar();

3、_buildScrollBar函数实现计算左侧和底层的滚动条。

根据zrender的高度和宽度，在zrender中增加2个长方形。
长方形的宽度和高度由样式定义。

纵向滚动条实现：
以纵向滚动条为例。vscrollArea是滚动条滚动区域，如图中的红色1，vscroll是可见可拖动的滚动条，如图中的红色2.



横向滚动条实现：
参考资料：

HTML5里面的知识：Canvas简单与KineticJS滚动条！ - linyahuis和网页设计点滴
- 博客频道 - CSDN.NET

http://blog.csdn.net/linyahuis/article/details/12754369