How to solve the problem that the second X-axis label is not displayed in ECharts?

ECharts dual X-axis: Solve the second axis label not displayed

When using ECharts to create a chart with dual X-axis (such as a performance chart), you may encounter the problem that the second X-axis label cannot be displayed. Even if axisLabel.show: true is set, the label may still be missing, showing only the axis. This article will provide an effective solution.

Here is a sample configuration that could cause this problem:

 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 problem is that configuring the X-axis alone does not guarantee the label display. The key lies in the configuration of series data. To ensure that the labels for the second X-axis are displayed, xAxisIndex: 1 property needs to be set for series data associated with the second X-axis (index starts at 0). Additionally, in order to resolve potential rendering issues, duplicates may be needed for series data.

Solution:

 series: [
    {
      type: 'custom',
      renderItem: renderItem,
      itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data: data
    },
    {
      type: 'custom',
      renderItem: renderItem,
      xAxisIndex: 1, // Key: Specify the second X-axis itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data: data
    }
  ]

By setting xAxisIndex: 1 for the second series , its data is forced to be associated with the second X-axis, so that the label of the second X-axis can be displayed. While this approach may involve repeated rendering, it is an effective solution in the current ECharts version. Future versions of ECharts may provide a more optimized solution. It is recommended to further explore more effective solutions to avoid repeated renderings.

The above is the detailed content of How to solve the problem that the second X-axis label is not displayed in ECharts?. For more information, please follow other related articles on the PHP Chinese website!