如何在 Apache ECharts 中使用两个不同的数据源作为主图表和 dataZoom？

Question

我正在使用 Apache ECharts 并尝试使用两种不同的数据源：一个用于主图表，另一个用于 dataZoom 预览。

由于数据量很大，我降低了较长时间段的分辨率，以最大程度地减少发送到客户端的数据。但是，我希望当用户放大较小的时间范围时主图表显示更高的分辨率。

此屏幕截图显示了我的问题

不幸的是，我不知道如何为主图表和 dataZoom 概述使用两个不同的数据源。有人对如何实现这一目标有任何建议吗？

基本上，dataZoom 图表应始终显示完整的图表，主图应加载并显示所选区域。

我在ECharts的在线编辑器中创建了这个示例，来演示我的问题

Answer 1

我能想到的最好方法是使用带有

type: 'category'

、

show: false

和时间数据（以某种方式格式化）的辅助 xAxis 作为

data

属性。现在你只需要在这个轴上有一个 dataZoom 并使用 dataZoom 事件来获取新数据。

示例：

function generateDateRandomPairs() {
  const dateRandomPairs = [];

  const date = new Date();

  var j = 1;
  for (let i = 0; i < 10000; i++) {
    const number = j;
    if (i % 10 == 0) {
      j++;
    }
    dateRandomPairs.push([date.toISOString(), number]);
    date.setSeconds(date.getSeconds() + 60);
  }

  return dateRandomPairs;
}

// All data but with lower resolution
// Should be used in dataZoom
var allData = generateDateRandomPairs();

// Data with high resolution
// Would be loaded through Ajax in real world
var mainPlotData = allData.slice(50, 200);

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      type: 'time',
      name: 'Date'
    },
    {
      type: 'category',
      data: allData.map((point) => point[0]),
      show: false
    }
  ],
  yAxis: [
    {
      gridIndex: 0,
      type: 'value',
      name: 'Value',
    }
  ],
  series: [
    {
      name: 'High-Res Data',
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: mainPlotData
    }
  ],
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 1,
      endValue: 200,
      realtime: false
    }
  ]
};

myChart.on('dataZoom', function(params) {
  const startIndex = Math.round((params.start / 100) * allData.length);
  const endIndex = Math.round((params.end / 100) * allData.length);
  let resolution = Math.ceil((endIndex - startIndex) / 200);
  resolution = resolution === 0 ? 1 : resolution;
  const data = allData.slice(startIndex, endIndex).filter((x, i) => i % resolution === 0);
  myChart.setOption({series: [{data: data}]})
});