如何禁用在禁用系列之一时发生的EChart的自动调整?

时间:2019-11-22 14:20:39

标签: echarts

我有一个带有多个系列的echart。如果用户单击其中一个图例并启用/禁用系列,则图表会自动调整(放大或缩小)x和y轴以显示最佳轴值。

enter image description here

如何禁用此行为,以使图表在启用/禁用系列时不会自动调整轴?我希望两个轴始终保持初始值不变。

我的研究:我知道我们可以在X和Y轴上设置最小值和最大值,以保持X和Y轴固定。但是在这种情况下,我必须手动计算各个系列的最小值/最大值。任何内置标志或选项都将更易于使用。

1 个答案:

答案 0 :(得分:0)

这是我的解决方案: 我最终为每个轴设置了最小值和最大值。我必须遍历每个数据系列,找出所有系列中的最大和最小可能值并将其设置在轴上。这避免了上述行为。 (某些图表可能有多个轴,因此请考虑在内)。

这是泛型函数,可用于chartOptions对象,以基于数据添加最小值和最大值。假定数据是每个系列的一部分。如果是多轴,则仅在第一轴上起作用。

static fixBothAxis(chartOptions) {
    console.log(chartOptions);
    const series = chartOptions.series;
    let maxXAxis = -Infinity,
      minXAxis = Infinity,
      maxYAxis = -Infinity,
      minYAxis = Infinity;
    series.forEach((seriesItem: any) => {
      // dont consider serieses that are related to secondary axis
      if (seriesItem && seriesItem.data) {
        const xSeries = seriesItem.data.map(item => item[0]);
        const ySeries = seriesItem.data.map(item => item[1]);
        maxXAxis = Math.ceil(Math.max(maxXAxis, ...xSeries));
        minXAxis = Math.floor(Math.min(minXAxis, ...xSeries));
        if(seriesItem.yAxisIndex !== 1){
          maxYAxis = Math.ceil(Math.max(maxYAxis, ...ySeries));
          minYAxis = Math.floor(Math.min(minYAxis, ...ySeries));
        }
      }
    });

    /* Make both max and min values "stick to nearest sensible value" */

    const xAxis = Array.isArray(chartOptions.xAxis)
      ? chartOptions.xAxis[0]
      : chartOptions.xAxis;
    const yAxis = Array.isArray(chartOptions.yAxis)
      ? chartOptions.yAxis[0]
      : chartOptions.yAxis;

    if (xAxis && !isNaN(minXAxis) && !isNaN(maxXAxis)) {
      xAxis.min = minXAxis;
      xAxis.max = maxXAxis;
    }
    if (yAxis && !isNaN(minYAxis) && !isNaN(maxYAxis)) {
      yAxis.min = minYAxis;
      yAxis.max = maxYAxis;
    }

    return chartOptions;
  }