How to make sure the label of the second X-axis in ECharts dual X-axis is visible?

ECharts Dual X-axis: How to ensure that the second X-axis label is visible?

When creating dual X-axis charts using ECharts, the labels of the second X-axis often hide or overlap, affecting the readability of the chart. This article explains how to solve this problem through a case analysis.

Here is a common example of misconfiguration:

 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 }
  }]

Even if show: true is set, the labels on the second X-axis may still not be displayed. The problem is series data configuration.

Solution:

The key is to correctly associate series data with the second X-axis. In the series configuration, add xAxisIndex: 1 attribute to the data series that needs to use the second X-axis. Here is a modified series configuration:

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

By setting xAxisIndex: 1 , explicitly specify that the data series uses the second X-axis to ensure that the label of the second X-axis is displayed correctly.

It should be noted that this method may have the problem of data redundant rendering. If your chart data is large, it is recommended to explore better solutions to improve performance. Everyone is welcome to share more effective optimization methods.

The above is the detailed content of How to make sure the label of the second X-axis in ECharts dual X-axis is visible?. For more information, please follow other related articles on the PHP Chinese website!