参考官网的拖拽的描述
https://echarts.apache.org/handbook/zh/how-to/interaction/drag/#%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD
进行了微调，锁定了x轴，仅在有轴方向移动节点
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="../dist/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
const myChart = echarts.init($("#container")[0]);
const symbolSize = 20;
const data = [
// [40, -10],
// [-30, -5],
// [-76.5, 20],
// [-63.5, 40],
// [-22.1, 50]
];
for(i=0;i<96;i++){
data.push([i,Math.floor(Math.random() * 100) + 30])
}
myChart.setOption({
title: {
text: '节点拖拽',
left: 'center',
textStyle: {
color: '#826'
}
},
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return (
'X: ' +
params.data[0].toFixed(2) +
'<br>Y: ' +
params.data[1].toFixed(2)
);
}
},
grid: {
top: '8%',
bottom: '12%'
},
dataset:{
source: data
},
xAxis: {
min: 0,
max: 96,
type: 'value',
axisLine: { onZero: false }
},
yAxis: {
min: 0,
max: 160,
type: 'value',
axisLine: { onZero: false }
},
// dataZoom: [
// {
// type: 'slider',
// xAxisIndex: 0,
// filterMode: 'none'
// },
// {
// type: 'slider',
// yAxisIndex: 0,
// filterMode: 'none'
// }
// ],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
}
]
});
setTimeout(function () {
myChart.setOption({
graphic: echarts.util.map(data, function (dataItem, dataIndex) {
//使用graphic组件，在每个点上覆盖一个可拖拽的圆点
return {
type: 'circle', //每个数据节点都是一个圆点
shape: { r: symbolSize / 2}, //圆点半径
position: myChart.convertToPixel('grid', dataItem), //圆点位置
invisible: true, //若为false，则为实心圆；为true，则为空心圆
draggable: true, //表示节点可拖拽
ondrag: echarts.util.curry(onPointDragging, dataIndex), //节点拖拽，修改series数据
onmousemove: echarts.util.curry(showTooltip, dataIndex), //鼠标移入，显示提示框
onmouseout: echarts.util.curry(hideTooltip), //鼠标移出，隐藏提示框
z: 100
};
})
})
}, 0);
window.addEventListener('resize', updatePosition); //窗口大小改变时，调整节点位置
myChart.on('dataZoom', updatePosition); //容器大小改变时，调整节点位置
function updatePosition() { //调整节点位置
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
}
function showTooltip(dataIndex) { //显示提示框
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip() { //隐藏提示框
myChart.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex) { //节点拖拽
//记录拖拽之前的位置
oldPoint =data[dataIndex]
newPoint = myChart.convertFromPixel('grid', this.position);
//x轴方向锁定,去掉此锁定会有意想不到的效果
newPoint[0]=oldPoint[0]
data[dataIndex] =newPoint
myChart.setOption({
series: [
{
id: 'a',
data: data
}
]
});
$("#lineData").text()
}
})
</script>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="container" style="width: 100%;height:400px;"></div>
<textarea id="lineData">
</textarea>
</body>
</html>
