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

爱秀

作者

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

使用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 }] }); }

以上是“echarts如何实现折线图的拖拽效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-05-30 14:10:03

echarts

分享空间
分享微博
手机扫一扫

海报

183

上一篇：Echarts怎么实现多条折线可拖拽效果下一篇：如何使用Pytorch实现two-head模型

推荐阅读