echarts 在动态刷新的折线图里如何实现拖动graphic时不恢复原位
时间: 2024-03-02 09:06:12 浏览: 62
Echarts带背景的折线图效果.rar
要实现拖动graphic时不恢复原位,可以通过监听graphic的drag事件,在drag事件回调函数中自定义graphic的移动逻辑。具体实现步骤如下:
1. 先创建一个echarts的折线图,并在上面添加一个可拖拽的graphic,代码如下:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}, {
type: 'rect',
shape: {
x: 100,
y: 100,
width: 50,
height: 50
},
draggable: true
}]
};
```
2. 监听graphic的drag事件,在drag事件回调函数中自定义graphic的移动逻辑。这里我们可以通过设置graphic的position属性,来实现拖动时不恢复原位的效果。
```javascript
myChart.on('drag', function(params) {
if (params.componentType === 'graphic') {
var graphic = params.graphic;
var position = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY]);
graphic.position = position;
myChart.setOption({
graphic: {
id: graphic.id,
position: position
}
});
}
});
```
在drag事件回调函数中,我们首先判断触发drag事件的组件类型是否为graphic,如果是的话,就获取到该graphic,并且将其位置设置为当前拖拽的位置。接着,我们通过调用`myChart.setOption`方法,来更新该graphic的位置信息。
这样,当我们拖动graphic时,它就会一直停留在我们拖拽的位置,不会恢复原位。
阅读全文