Apache Echarts:dataZoom 的微型图歪曲了托管图中的数据(滑块上绘制的图与主图的数据不匹配)

Mon*_*rig 5 javascript user-interface charts echarts

当我使用 Apache Echarts 创建简单的线图/图表时,我还可以添加内置数据缩放机制:dataZoom。它达到了它的主要目标,但是 dataZoom 制作的缩放数据表示存在问题。默认情况下,dataZoom 不考虑图表比例限制刻度或/和最小和最大允许值(函数的范围,由绘图表示)。相反,图表的缩略图是在连续传递给绘图的特定值范围上绘制的部分绘图的特定值范围上绘制的。此外,每次从最小值和最大值 \xe2\x80\x8b\xe2\x80\x8b 到图形元素的边框添加一个小缩进。

\n

结果,可视化数据的表示看起来与现实不一致:null 不为 null,max 不为 max(因为它们与 \xe2\x80\x8b\xe2 的坐标区域的下限和上限不匹配) \x80\x8b分别是缩略图),图表波动的幅度与真实数据波动的规模不对应。

\n

截屏

\n

有没有办法(有记录或无记录)删除缩进并强制绘图使用 yAxis 刻度允许的最小值和最大值 \xe2\x80\x8b\xe2\x80\x8ballowed ?

\n

我画了一个小例子,可以粘贴到Echarts在线编辑器中。

\n
let x = [];\nlet y = [];\nlet scaled = [];\n/*y = [\n  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300, 300, \n  10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0, 0, 0, 0, 0, 0\n];*/\nfor (let i = 1; i < 300; i++) {\n  x.push(i);\n  element = Math.random() * 40 + 50;\n  y.push(element);\n  scaled.push(element * 6 - 250);\n}\noption = {\n  xAxis: {\n    data: x\n  },\n  yAxis: {\n    min: 0,\n    max: 300\n  },\n  dataZoom: [\n    {\n      start: 50,\n      end: 58.5\n    }\n  ],\n  series: [\n    {\n      name: \'Fake Data\',\n      type: \'line\',\n      symbol: \'none\',\n      data: y\n    },\n    {\n      name: \'Simulated Scaling\',\n      type: \'line\',\n      symbol: \'none\',\n      lineStyle: {\n        opacity: 0.3\n      },\n      data: scaled\n    }\n  ]\n};\n
Run Code Online (Sandbox Code Playgroud)\n

正如您所看到的,由 dataZoom 绘制的图表的波动幅度并不对应于主要数据,而是对应于它们的某种人工转换(浅绿色图表)。然后尝试注释第 11 行并取消注释第 4 行到第 7 行。在绘图开始时,您将看到主图接触 y 零线,但缩略图上看不到。

\n

我没有找到任何使它们看起来像预期的 dataZoom参数。

\n