How to solve the problem that the second label of the dual x-axis in echarts is not displayed by adjusting the series configuration?

ECharts Dual X-axis: How to display the second axis label?

When creating a dual X-axis chart with ECharts, you may encounter issues that the second X-axis label cannot be displayed. This article will introduce an effective way to solve this problem by tweaking series configuration.

Many users reported that even if the dual X-axis is set, the label of the second X-axis still cannot be displayed, only the axis is displayed. Here is a typical configuration example where the second X-axis label is missing:

 xaxis: [{
    name: 'X axis 1',
    min: starttime,
    scale: true,
    axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
    axisLabel: {
      backgroundColor: 'red',
      formatter: '{value} ml'
    }
  }, {
    name: 'X axis 2',
    axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
    min: starttime,
    scale: true,
    axisLabel: {
      backgroundColor: 'red',
      inside: true,
      show: true,
      hideOverlap: true
    }
  }],

The key to the solution is series configuration. We need to configure a series for each X axis and use xAxisIndex property to specify which X axis corresponds to each series . The following are the modified series configurations:

 series: [
    {
      type: 'custom',
      renderItem: renderItem,
      itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [0], // Point to the first x-axis y: 0
      },
      data: data
    },
    {
      type: 'custom',
      renderItem: renderItem,
      xAxisIndex: 1, // Point to the second x-axis itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [1], // Point to the second x-axis y: 0
      },
      data: data
    }
  ]

By explicitly specifying xAxisIndex for each series , we can ensure that the data for each series is associated with the correct X-axis, thus solving the problem that the second X-axis label is not displayed. While this approach may result in slight performance losses, it is currently an effective way to solve this problem.

The above is the detailed content of How to solve the problem that the second label of the dual x-axis in echarts is not displayed by adjusting the series configuration?. For more information, please follow other related articles on the PHP Chinese website!