x轴有两个系列的要怎么做？

作者站长头像
站长
· 阅读数 5

echarts或者antv都可以

x轴有两个系列的要怎么做？

回复
1个回答
avatar
test
2024-06-27

OP的效果一般叫X轴两级化

第一种

answer image

#### <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>echarts自定义分组-静态</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
</head>

<body>
  <div id="bar" style="width: 800px; height: 600px;"></div>

  <script type="text/javascript">

    var chart = echarts.init(document.getElementById('bar'));

    var xAxisData = ["长裤", "短裤", "衬衣", "羊毛衫", "背心", "皮鞋"];
    //var xAxisGroupData =  [ "裤子", "裤子", "衣服", "衣服", "衣服" , "鞋子" ];
    var xAxisGroupData = ["{offset|}裤子", "", "", "衣服", "", "鞋子"]; // 分组显示的标签（组内如果是偶数加上偏移{offset|}，如果是计数放正中间）
    var seriesData = [15, 20, 10, 5, 15, 10];

    var groupSeparates = [true, false, true, false, false, true]; // 分组分隔线

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'echarts自定义分组-静态'
      },
      tooltip: {},
      xAxis: [{
        position: "bottom",
        data: xAxisData,
        axisTick: {
          length: 20 // 刻度线的长度
        },
        axisLabel: {
          margin: 10 // 标签到轴线的距离
        }
      }, {
        position: "bottom",
        data: xAxisGroupData,
        axisTick: {
          length: 40,
          interval: function (index, value) {
            return groupSeparates[index]; // 根据标识分组的刻度线
          }
        },
        axisLabel: {
          margin: 30,
          interval: 0, // 显示所有标签
          rich: {
            offset: {
              width: 0
            }
          }
        }
      }],
      yAxis: {},
      series: [{
        type: 'bar',
        data: seriesData
      }]
    };


    chart.lastBandWidth = 0;
    // 监听渲染事件，只要bandWidth发生变化，重新设置标签偏移的值
    chart.on('rendered', function () {
      var bandWidth = chart._chartsViews[0].renderTask.context.outputData._layout.bandWidth;
      if (chart.lastBandWidth != bandWidth) {
        chart.lastBandWidth = bandWidth;
        // 延时执行否则echarts渲染异常
        setTimeout(() => {
          // 加上偏移后重新绘制
          var optionNew = { xAxis: [{}, {}] };
          // 增量更新偏移值
          optionNew.xAxis[1] = { axisLabel: { rich: { offset: { width: chart.lastBandWidth } } } };
          //console.info(optionNew);
          chart.setOption(optionNew);
        }, 0);
      }
    });

    // 绘制
    chart.setOption(option);

  </script>

</body>

</html>

第二种:

answer image

https://echarts.apache.org/examples/zh/editor.html?c=bar-back...
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容