如何让echarts-for-react中多个yAxis具有相同的零值位置

Question

在此输入图片描述

如上图所示，我有两个图表（一个折线图和一个条形图），它们的 0-y 轴不在同一位置。我怎样才能使主题的 0-y 轴处于同一位置。或者有一些方法可以将两个图表的原点配置为 0 值位置。

我只阅读了 echarts 和 echarts-for-react 文档，但没有找到任何符合我需求的配置。

Answer 1

您可以自行缩放数据并设置 min/max 属性。

示例：

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },

  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis:{
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: [
    {
      type: 'value',
      name: 'Evaporation',
      position: 'right',
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      min: value => -computeAxisBounds(value),
      max: value => computeAxisBounds(value),
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Precipitation',
      position: 'right',
      offset: 80,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1]
        }
      },
      min: value => -computeAxisBounds(value),
      max: value => computeAxisBounds(value),
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '温度',
      position: 'left',
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
      min: value => -computeAxisBounds(value),
      max: value => computeAxisBounds(value),
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 1,
      data: [
        -2.6, -5.9, -9.0, -26.4, -28.7, -70.7, -175.6, -182.2, -48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 2,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

function computeAxisBounds(value) {
  const absMax = Math.max(Math.abs(value.min), Math.abs(value.max));
  const base = Math.pow(10, Math.floor(Math.log10(absMax)));
  return Math.ceil(absMax / base) * base;
}