echarts如何实现折线图的拖拽效果

tangjin

作者

小编给大家分享一下echarts如何实现折线图的拖拽效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

使用echarts实现折线图的拖拽，供大家参考，具体内容如下

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="./echarts.js"></script>
</head>
<body>
<divid="main"></div>
<scripttype="text/javascript">
varsymbolSize=20;
vardata=[[15,0],[-50,10],[-56.5,20],[-46.5,30],[-22.1,40]];
varmyChart=echarts.init(document.getElementById('main'));
myChart.setOption({
#表示不使用默认的『显示』『隐藏』触发规则。
tooltip:{
triggerOn:'none',
formatter:function(params){
return'X:'+params.data[0].toFixed(2)+'<br>Y:'+params.data[1].toFixed(2);
}
},
xAxis:{
min:-100,
max:80,
type:'value',
axisLine:{onZero:false}
},
yAxis:{
min:-30,
max:60,
type:'value',
axisLine:{onZero:false}
},
series:[
{
id:'a',
type:'line',
smooth:true,
symbolSize:symbolSize,
data:data
}
],
});
myChart.setOption({
#拖拽功能：用graphic组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点
graphic:echarts.util.map(data,function(item,dataIndex){
return{
type:'circle',
position:myChart.convertToPixel('grid',item),
shape:{
r:symbolSize/2
},
invisible:true,
draggable:true,
ondrag:echarts.util.curry(onPointDragging,dataIndex),
onmousemove:echarts.util.curry(showTooltip,dataIndex),
onmouseout:echarts.util.curry(hideTooltip,dataIndex),
z:100
};
})
});
window.addEventListener('resize',function(){
myChart.setOption({
graphic:echarts.util.map(data,function(item,dataIndex){
return{
position:myChart.convertToPixel('grid',item)
};
})
});
});
functionshowTooltip(dataIndex){
myChart.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:dataIndex
});
}
functionhideTooltip(dataIndex){
myChart.dispatchAction({
type:'hideTip'
});
}
functiononPointDragging(dataIndex,dx,dy){
data[dataIndex]=myChart.convertFromPixel('grid',this.position);
myChart.setOption({
series:[{
id:'a',
data:data
}]
});
}

</script>
</body>
</html>