React Apex折线图多个系列

Question

我目前正在使用Apex折线图生成6个系列。我遇到的问题是，有3对共享y轴标题并与其伙伴打勾。如果我显示2个系列并且它们是伙伴，则它们的标题和刻度在y轴上显示两次。我认为可以实现的唯一可行的解​​决方案是每个伙伴中只有一个始终显示，但是理想情况下，我希望在未选择伙伴时隐藏y轴，而在选择伙伴时显示。如果有人可以提供后一种解决方案的帮助，我将不胜感激

  const options = {
    chart: {
      id: 'lineChart',
      background: theme.palette.background.paper,
    },
    colors: [blue, yellow, green, red, pink, neonGreen],
    height: '500px',
    markers: {
      size: 5,
    },
    series: [
      {
        name: 'Whopper fat',
        data: whopperFatSeriesData,
      },
      {
        name: 'Whopper Calories',
        data: whopperCaloriesSeriesData,
      },
      {
        name: 'Whopper Cost',
        data: whopperCostSeriesData,
      },
      {
        name: 'McDouble fat',
        data: mcDoubleFatSeriesData,
      },
      {
        name: 'McDouble Calories',
        data: mcDoubleCaloriesSeriesData,
      },
      {
        name: 'McDouble Cost',
        data: mcDoubleCostSeriesData,
      },
    ],
    stroke: {
      width: 2,
    },
    theme: {
      mode: theme.palette.type,
    },
    tooltip: {
      shared: true,
      custom: function ({ dataPointIndex }: { dataPointIndex: number }) {
        return renderToStaticMarkup(
          <CustomTooltip data={whopperFatSeriesData} dataPointIndex={dataPointIndex}></CustomTooltip>,
        )
      },
    },
    title: {
      text: 'Cloud Usage',
      offsetY: -8,
      style: {
        fontSize: '24px',
      },
    },
    xaxis: {
      type: 'datetime',
      title: {
        text: '',
        offsetY: 8,
        style: {
          fontSize: '15px',
        },
      },
      labels: {
        formatter: function (value: any, timestamp: any, index: any) {
          return moment.utc(timestamp).format('DD-MMM-YY')
        },
      },
    },
    yaxis: [
      {
        max: getMaxCalories,
        seriesName: 'Whopper Fat',
        title: {
          text: 'Whopper Fat (g)',
          offsetX: -8,
          style: {
            fontSize: '15px',
          },
        },
        decimalsInFloat: 3,
      },
      {
        title: {
          text: 'Whopper Calories (kc)',
          opposite: -8,
          style: {
            fontSize: '15px',
            color: yellow,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: yellow,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
      {
        title: {
          text: 'Cost ($)',
          offsetX: -8,
          style: {
            fontSize: '15px',
            color: green,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: green,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
      {
        max: getMaxCalories,
        title: {
          text: 'McDouble fat (g)',
          offsetX: -8,
          style: {
            fontSize: '15px',
          },
          show: false,
        },
        decimalsInFloat: 3,
        show: false,
      },
      {
        title: {
          text: 'McDouble Calories (kc)',
          opposite: -8,
          style: {
            fontSize: '15px',
            color: yellow,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: yellow,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
      {
        title: {
          text: 'Cost ($)',
          offsetX: -8,
          style: {
            fontSize: '15px',
            color: green,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: green,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
    ],
  }

https://docs.microsoft.com/en-us/office/dev/add-ins/overview/office-add-in-availability