ECharts--基於力導向佈局圖功能更完善的人物關係圖外掛擴充套件-增加橫縱滾動條
連線點選事件/樣式/標註文字及原始碼。今天介紹一下怎麼給echarts力導向佈局圖增加滾動條。
echarts力導向佈局圖是沒有滾動條功能的。力導向佈局圖的本意不是做人物關係圖，所以當作人物關係圖使用的時候，
就會出現問題。資料太多，就會罩住了。所以考慮增加個滾動條。
思路：
如果只是在html中增加滾動條是完全沒問題。但是echarts是基於zrender，zrender是基於html5的。html5的canvas是沒有滾動條選項的。
需要自己給他計算滾動條。
1、提供是否展示滾動條的選項：isShowScrollBar
2、根據引數構建滾動條： if(option.isShowScrollBar) _buildScrollBar();
3、_buildScrollBar函式實現計算左側和底層的滾動條。
根據zrender的高度和寬度，在zrender中增加2個長方形。
| 1 2 3 4 5 |
var barPosition = [];
barPosition[0] = (zr.getWidth() / 2 - 50);
barPosition[1] = (zr.getHeight() / 2 - 50);
Ox = barPosition[0];
Oy = barPosition[1];
|
長方形的寬度和高度由樣式定義。
縱向滾動條實現：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
var vscrollArea = {
shape:'rectangle',
id:'vscrollArea',
style: {
x: zr.getWidth()-20,
y: 10,
width: 20,
height: zr.getHeight() - 30,
color: 'gray',
opacity: 0.3
}
};
var vscroll = {
shape:'rectangle',
id:'vscroll',
|