更新时间序列时如何保持当前缩放？阿帕奇 Echarts

Question

更新时间序列数据时如何保持当前数据缩放？我有一个图表，每 1 分钟更新一次数据，但每次更新数据时数据缩放都会重置为 100。另外，如何更改数据缩放标签的文本颜色我找不到此设置？[文本]

编辑器

我想在拖动数据缩放时更改标签文本颜色。

Answer 1

如果您不共享代码，我只能猜测您在更新数据时也在更新 dataZoom 组件。默认情况下不应重置。

标准滑块发生的情况是，它应用了相对的 dataZoom （

start

/

end

属性），如果添加新数据，它会调整滑块。如果您应用绝对 dataZoom（

startValue

/

endValue

属性），滑块将保留在所选缩放窗口上。

要更改 文本颜色，请使用

dataZoom.textStyle.color

属性。

示例：

const hour = 1000 * 60 * 60;
let counter = 0;
function makeData() {
  const data = Array.from([0,1,2,3,4,5], x => [(counter * 6 + x) * hour, Math.random() * 100]);
  counter++;
  return data;
}
let data = makeData();

option = {
  xAxis: {
    type: 'time'
  },
  yAxis: {},
  dataZoom: {textStyle: {color: 'red'}},
  series: [
    {
      type: 'line',
      data: data,
    }
  ]
};

// set absolute dataZoom
setTimeout(function() {
  myChart.dispatchAction({
    type: 'dataZoom',
    dataZoomIndex: 0,
    startValue: 0,
    endValue: 4* hour
  })
}, 1000);

// append data
setInterval(function() {
  data = data.concat(makeData());
  myChart.setOption({series: [{data: data}]});
}, 2000);