echarts中多行axislabel

Question

有没有人知道。 Echart如何制作多行坐标轴标签(https://echarts.apache.org/examples/en/)？我需要一个组标签（年、季、..）和用于分隔组的垂直线。谢谢。

Answer 1

垂直线可以用markLine, see example绘制。
只需添加带有所需标签的第二个 xAxis，如下所示：

  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>

echarts中多行axislabel

Multiple lines of axislabel in echarts

echarts