const that = this // 因为ondrag函数必须在回调内使用this.position获取实时坐标，此处必须用that替换this
return {
// 'circle' 表示这个 graphic element 的类型是圆点。
type: 'circle',
shape: {
// 圆点的半径。
r: this.symbolSize / 2
},
// 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
// 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置
position: this.dom.convertToPixel('grid', dataItem),
// 这个属性让圆点不可见（但是不影响他响应鼠标事件）。
invisible: true,
// 这个属性让圆点可以被拖拽。
draggable: true,
// 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。
z: 100,
ondrag: echarts.util.curry(function (dataIndex) { // 此处必须用匿名函数，不能用箭头函数，否则拿不到拖动的坐标
let origin = that.dom.convertToPixel('grid', that.data[dataIndex]) // 得到每个圆点原始位置
// let maxY = that.dom.convertToPixel('grid', [40, 36]) // 最高温度为36摄氏度，暂未做封装
// 超过最高温度36将不能拖动,写死的最低点高度为240，最高点为40
if (this.position[1] > 240) {
this.position[1] = 240
} else if (this.position[1] < 40) {
this.position[1] = 40
}
this.position[0] = origin[0] // 控制每个点位只能在y轴方向移动
// this.position[1] = origin[1] // 控制每个点位只能在x轴方向移动
// 实时获取拖动的点位信息并根据此信息重新画图
that.data[dataIndex] = that.dom.convertFromPixel('grid', this.position)
that.dom.setOption({
series: [{
id: 'a',
data: that.data
}] })
}, dataIndex)
}
})
})
on(window, 'resize', this.dom.setOption({
graphic: echarts.util.map(this.data, (item, dataIndex) => {
return {
position: this.dom.convertToPixel('grid', item)
}
})
}))
},
beforeDestroy () {
off(window, 'resize', this.resize)
}
}
</script>
总结
以上所述是小编给大家介绍的vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
