Multiple lines of axislabel in echarts

Question

Does anybody know. How to make a multiple lines of axis label with Echart (https://echarts.apache.org/examples/en/)? I need a group label (year, season, ..) and vertical lines for separating groups. Thank you.

Answer 1

1. Vertical lines can draw with markLine, see example.
2. Just add second xAxis with desired labels, something like this:

  var myChart = echarts.init(document.getElementById('main'));
  var option = {
      tooltip: {},
      xAxis: [{
        data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
      },{
        position: 'bottom',
        offset: 30,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: ['Winter', 'Spring', 'Summer', 'Autumn']
      }],
      yAxis: {},
      series: [{
        name: 'Series',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20]
      }]
  };

  myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 1024px;height:400px;"></div>