Vue.js+Quasar集成ECharts的缩放与数据抽稀处理问题问询

问题描述清晰度 #

你的问题描述非常清晰，核心痛点可归纳为两点：

• 基于百分比范围请求后端降采样数据后，前端会用子集覆盖全局数据集，导致无法回退到原始全集范围。
• 在子集内二次缩放时，后端仍按原始全集解析百分比参数，返回数据无变化，无法实现精细化缩放。

解决方案建议 #

首选方案：改用绝对数值区间传递查询范围 #

放弃百分比，直接传递轴的绝对数值区间（比如时序数据传时间戳范围、数值轴传具体数值范围），这是最简单且不易出错的方案：

• 初始请求：前端传递原始全集的绝对范围（例如时间从2024-01-01 00:00:00到2024-01-31 23:59:59），后端在该区间内将数据降采样至1000条返回。
• 缩放/平移操作：通过ECharts的dataZoom事件获取当前视图的startValue和endValue（对应轴的绝对数值），将这两个值作为查询参数传给后端。后端在原始全量数据中截取该绝对区间，再降采样至1000条返回。
• 回退全集：前端缓存初始的全集绝对范围，需要回退时直接复用该参数请求即可。

备选方案：维护全集-子集的百分比映射链（不推荐） #

如果必须使用百分比参数，前端需要维护当前视图对应的原始全集百分比映射关系：

• 初始状态：当前视图对应全集的0%-100%。
• 第一次缩放至子集的10%-90%：计算对应全集的范围为10%-90%，并记录该映射。
• 第二次在该子集内缩放10%-90%：基于上一次的映射，计算对应全集的范围为10% + (90%-10%)*10% = 18%到10% + (90%-10%)*90% = 82%，将该范围传给后端。
• 缺点：需要维护多层映射关系，逻辑复杂，容易出现计算误差，仅适合无法改用绝对区间的场景。

内容的提问来源于stack exchange，提问作者NikoProg