ECharts折线图上下拖动数据
2023-8-17|2023-9-1
南枫Von
type
status
date
slug
summary
tags
category
icon
password
Property
Sep 1, 2023 06:50 AM
最近遇到一个需求，页面上展示一张折线图和表格，相同的数据。需要能够上下拖动折线图上的点，改变该数值，并且能够同步修改表格中的数据；反过来也能成功修改。
实现效果
实现思路：
- 通过 graphic 组件在预测值的数据点位置添加可拖拽的圆点。
- 绑定圆点的 drag、mouse 事件,实现拖拽、tooltip 等交互效果。
- 在拖拽结束后,调用 updateData 函数更新数据,并重新设置图表选项来更新线图。
- updatePosition 函数用于重新计算圆点位置,保持和数据点对齐。
- showTooltip、hideTooltip 控制 tooltip 的显示隐藏。
- onPointDragging 函数处理圆点拖拽中的视觉反馈效果。
- updateData 函数接收拖拽结束后的新数据,这里仅仅打印到控制台,可以根据需要修改。
在线Demo
代码
参考资料：
2023-0901更新：
onmouseup 事件应该改为 ondragend 。当有两条线需要拖拽修改时，将A线的a点拖拽到B线的b点相同位置或相邻位置时，使用 onmouseup 会将b点的数据更新上去了- Twikoo
- Waline
- Cusdis