參考官網(wǎng)的拖拽的描述
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
進行了微調(diào)，鎖定了x軸，僅在有軸方向移動節(jié)點
完整代碼
<!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: '節(jié)點拖拽',
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', //每個數(shù)據(jù)節(jié)點都是一個圓點
shape: { r: symbolSize / 2}, //圓點半徑
position: myChart.convertToPixel('grid', dataItem), //圓點位置
invisible: true, //若為false，則為實心圓；為true，則為空心圓
draggable: true, //表示節(jié)點可拖拽
ondrag: echarts.util.curry(onPointDragging, dataIndex), //節(jié)點拖拽，修改series數(shù)據(jù)
onmousemove: echarts.util.curry(showTooltip, dataIndex), //鼠標移入，顯示提示框
onmouseout: echarts.util.curry(hideTooltip), //鼠標移出，隱藏提示框
z: 100
};
})
})
}, 0);
window.addEventListener('resize', updatePosition); //窗口大小改變時，調(diào)整節(jié)點位置
myChart.on('dataZoom', updatePosition); //容器大小改變時，調(diào)整節(jié)點位置
function updatePosition() { //調(diào)整節(jié)點位置
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) { //節(jié)點拖拽
//記錄拖拽之前的位置
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>
