echarts散点图弹框拖动
时间: 2023-09-24 20:14:02 浏览: 108
可以通过echarts的toolbox中的dataZoom组件来实现散点图弹框的拖动功能。具体实现步骤如下:
1. 在option中添加dataZoom组件:
```javascript
option = {
...
toolbox: {
feature: {
dataZoom: {}
}
},
...
};
```
2. 设置xAxis和yAxis的scale为true:
```javascript
option = {
...
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
...
};
```
3. 在series中添加markPoint:
```javascript
option = {
...
series: [{
type: 'scatter',
data: [
[10.0, 8.04],
[8.0, 6.95],
...
],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
}
}],
...
};
```
4. 点击toolbox中的dataZoom按钮,即可拖动散点图弹框。
注意:在使用dataZoom组件时,需要设置xAxis和yAxis的scale为true,否则无法实现拖动功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)