如何精确获取ECharts图表上任意曲线点的具体数值?
- 内容介绍
- 文章标签
- 相关推荐
本文共计1530个文字,预计阅读时间需要7分钟。
目录+需求背景+需求调研+实现步骤+需求背景+智能农业中一个非常重要的功能是控制温室生长环境,以更好地促进作物生长。为此,我们需要在曲线上根据不同农作物设置不同的环境数据。
目录
- 需求背景
- 需求调研
- 实现步骤
需求背景
智慧农业里有一个很重要的功能是控制温室生长环境,让农作物生长的更好。于是,我们需要在曲线上根据不同农作物设置不同的环境数据。为了方便用户修改这些数据,我们需要支持用户在曲线上进行拖拽,并且拖拽后还需要把拖拽后的关键点位返回给后端。后面温度传感器收到温度数据后,会发给后端和前端。两端都需要判断传过来的温度是否在曲线之间。如果超出或者下沉需要触发相应的事件。
需求调研
本来以为这个需求很简单,导入echarts,设置两条曲线,并支持拖动。拖动。这些都属于echarts开放的功能,但等到要查询某个时间点曲线上的值时,才发现echarts根本就没开放这个功能,查看源码发现他是用贝塞尔算法生成的曲线,好吧,既然你不支持,那就只能自己实现了。
后面找了下资料,发现一个贝塞尔的js开源库,看了下它的说明,发现有get(t)方法获取到曲线上Y轴的值。参数t表示两个关键点之间x轴值。由于我们传入的x轴是时间,所以这个t就是x轴的时间。
所以,理论上,如果两个使用的算法是一致的,那么从曲线上获得的值就应该是一样的。
本文共计1530个文字,预计阅读时间需要7分钟。
目录+需求背景+需求调研+实现步骤+需求背景+智能农业中一个非常重要的功能是控制温室生长环境,以更好地促进作物生长。为此,我们需要在曲线上根据不同农作物设置不同的环境数据。
目录
- 需求背景
- 需求调研
- 实现步骤
需求背景
智慧农业里有一个很重要的功能是控制温室生长环境,让农作物生长的更好。于是,我们需要在曲线上根据不同农作物设置不同的环境数据。为了方便用户修改这些数据,我们需要支持用户在曲线上进行拖拽,并且拖拽后还需要把拖拽后的关键点位返回给后端。后面温度传感器收到温度数据后,会发给后端和前端。两端都需要判断传过来的温度是否在曲线之间。如果超出或者下沉需要触发相应的事件。
需求调研
本来以为这个需求很简单,导入echarts,设置两条曲线,并支持拖动。拖动。这些都属于echarts开放的功能,但等到要查询某个时间点曲线上的值时,才发现echarts根本就没开放这个功能,查看源码发现他是用贝塞尔算法生成的曲线,好吧,既然你不支持,那就只能自己实现了。
后面找了下资料,发现一个贝塞尔的js开源库,看了下它的说明,发现有get(t)方法获取到曲线上Y轴的值。参数t表示两个关键点之间x轴值。由于我们传入的x轴是时间,所以这个t就是x轴的时间。
所以,理论上,如果两个使用的算法是一致的,那么从曲线上获得的值就应该是一样的。

