需求
- 实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表
实现
// 引入依赖
import Highcharts from 'highcharts/highcharts.js';
import draggable from 'highcharts/modules/draggable-points.js'
// 注册拖拽事件
draggable(Highcharts);
// 关键配置
plotOptions: {
dragDrop: {
draggableY: true, // 启用y轴拖拽
dragPrecisionY: 0.1 // 拖拽步长
},
point: {
events: {
// 拖拽过程事件
drag: function(event) {
// console.log('拖动', event)
},
// 拖拽结束事件
drop: function(evt) {
}
}
}
总结
- vue中拖拽依赖引入,需要用hichart对象进行注册,其他的依赖也是同样的注册方式来使用