如何精确获取ECharts图表上任意曲线点的具体数值?

2026-04-02 07:420阅读0评论SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计1530个文字,预计阅读时间需要7分钟。

如何精确获取ECharts图表上任意曲线点的具体数值?

目录+需求背景+需求调研+实现步骤+需求背景+智能农业中一个非常重要的功能是控制温室生长环境,以更好地促进作物生长。为此,我们需要在曲线上根据不同农作物设置不同的环境数据。

目录
  • 需求背景
  • 需求调研
  • 实现步骤

需求背景

智慧农业里有一个很重要的功能是控制温室生长环境,让农作物生长的更好。于是,我们需要在曲线上根据不同农作物设置不同的环境数据。为了方便用户修改这些数据,我们需要支持用户在曲线上进行拖拽,并且拖拽后还需要把拖拽后的关键点位返回给后端。后面温度传感器收到温度数据后,会发给后端和前端。两端都需要判断传过来的温度是否在曲线之间。如果超出或者下沉需要触发相应的事件。

需求调研

本来以为这个需求很简单,导入echarts,设置两条曲线,并支持拖动。拖动。这些都属于echarts开放的功能,但等到要查询某个时间点曲线上的值时,才发现echarts根本就没开放这个功能,查看源码发现他是用贝塞尔算法生成的曲线,好吧,既然你不支持,那就只能自己实现了。

后面找了下资料,发现一个贝塞尔的js开源库,看了下它的说明,发现有get(t)方法获取到曲线上Y轴的值。参数t表示两个关键点之间x轴值。由于我们传入的x轴是时间,所以这个t就是x轴的时间。

所以,理论上,如果两个使用的算法是一致的,那么从曲线上获得的值就应该是一样的。

阅读全文

本文共计1530个文字,预计阅读时间需要7分钟。

如何精确获取ECharts图表上任意曲线点的具体数值?

目录+需求背景+需求调研+实现步骤+需求背景+智能农业中一个非常重要的功能是控制温室生长环境,以更好地促进作物生长。为此,我们需要在曲线上根据不同农作物设置不同的环境数据。

目录
  • 需求背景
  • 需求调研
  • 实现步骤

需求背景

智慧农业里有一个很重要的功能是控制温室生长环境,让农作物生长的更好。于是,我们需要在曲线上根据不同农作物设置不同的环境数据。为了方便用户修改这些数据,我们需要支持用户在曲线上进行拖拽,并且拖拽后还需要把拖拽后的关键点位返回给后端。后面温度传感器收到温度数据后,会发给后端和前端。两端都需要判断传过来的温度是否在曲线之间。如果超出或者下沉需要触发相应的事件。

需求调研

本来以为这个需求很简单,导入echarts,设置两条曲线,并支持拖动。拖动。这些都属于echarts开放的功能,但等到要查询某个时间点曲线上的值时,才发现echarts根本就没开放这个功能,查看源码发现他是用贝塞尔算法生成的曲线,好吧,既然你不支持,那就只能自己实现了。

后面找了下资料,发现一个贝塞尔的js开源库,看了下它的说明,发现有get(t)方法获取到曲线上Y轴的值。参数t表示两个关键点之间x轴值。由于我们传入的x轴是时间,所以这个t就是x轴的时间。

所以,理论上,如果两个使用的算法是一致的,那么从曲线上获得的值就应该是一样的。

阅读全文