echarts 关系图 拖动和缩放
时间: 2023-07-11 17:03:32 浏览: 249
Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)
5星 · 资源好评率100%
ECharts 关系图支持拖动和缩放功能,可以通过以下方法实现:
1. 拖动功能:在关系图上点击并拖动鼠标可以实现拖动功能。同时,可以通过设置`roam`属性为`true`来开启拖动功能,如下所示:
```javascript
option = {
// ...
series: [{
type: 'graph',
roam: true,
// ...
}]
}
```
2. 缩放功能:可以通过滚动鼠标实现缩放功能,也可以通过添加控制条来实现缩放功能。控制条需要通过设置`toolbox.feature.dataZoom`属性来添加,如下所示:
```javascript
option = {
// ...
toolbox: {
feature: {
dataZoom: {
show: true,
title: {
zoom: '缩放',
back: '还原'
}
},
// ...
}
},
// ...
}
```
以上是两种常用的实现方法,你可以根据具体需求选择相应的方法。
阅读全文