ECharts折线图上下拖动数据

最近遇到一个需求,页面上展示一张折线图和表格,相同的数据。需要能够上下拖动折线图上的点,改变该数值,并且能够同步修改表格中的数据;反过来也能成功修改。

实现效果

notion image
实现效果

实现思路:

  1. 通过 graphic 组件在预测值的数据点位置添加可拖拽的圆点。
  1. 绑定圆点的 drag、mouse 事件,实现拖拽、tooltip 等交互效果。
  1. 在拖拽结束后,调用 updateData 函数更新数据,并重新设置图表选项来更新线图。
  1. updatePosition 函数用于重新计算圆点位置,保持和数据点对齐。
  1. showTooltip、hideTooltip 控制 tooltip 的显示隐藏。
  1. onPointDragging 函数处理圆点拖拽中的视觉反馈效果。
  1. updateData 函数接收拖拽结束后的新数据,这里仅仅打印到控制台,可以根据需要修改。

在线Demo

Examples - Apache ECharts
Apache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
 

代码

参考资料:

[!info] Examples - Apache ECharts Apache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 https://echarts.apache.org/examples/zh/editor.html?c=line-draggable
官方折线数据拖动样例
[!info] echarts折线图 上下拖动数据怎么做? 如图这样:, https://segmentfault.com/q/1010000040315440
2023-0901更新:onmouseup 事件应该改为 ondragend 。当有两条线需要拖拽修改时,将A线的a点拖拽到B线的b点相同位置或相邻位置时,使用 onmouseup 会将b点的数据更新上去了
Loading...

© 南枫 2019-2026