微客导航 » 文章资讯 » echarts实现折线图的拖拽效果

echarts实现折线图的拖拽效果

2023-08-04 07:03:06 144

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

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)+'
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 }] }); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

echarts实现折线图的拖拽效果

热门推荐

随机推荐