echarts或者antv都可以

OP的效果一般叫X轴两级化第一种 #### <!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> 第二种: <a href="https://link.segmentfault.com/?enc=HCUifUZpabGawDeBmEdKqw%3D%3D.0b7EvR%2FJFaMXD1tlQ3kAZhNUhi%2FMYuEGt625wb31FEtS63UzPcBf1aUIZyh8iZFP3EnL7Uus7Xt9Mh165NmG5nWJCLMXXcrVZuWin%2FI6ml2TXKPo3f4PU9qlAAEHVX3aNnEd3LB7VIecb8PG3bc76gM5ihNJ%2BktfIi0hwBw26m5Yu%2FrzAoWthbKwJ16TUayMIYDA7ByOxt3gd0PW3iLPrrYFu0KvKn%2FQB%2BFxu4tAWRqmmJK89aOr9LRhV6n84T6PzrJIHH3t3KOBdQ%2FJkJIBa1v3%2BRfosN1KLw9dJlx8YmgZBAPgmOQORtrf5LZX5I2YYvWrtj94zRYQXydie%2BVTeLPWMb0ZyDr2yujYJoKZ5hkFhjCjClSvh4x8ahiY%2B7lFlPOZ%2FiAAxH26xtsadQCMb1tK8z6POY3ObwIW55r1mtpeL4vctCnNF3d5p8wCpMkp0qQoPKhH%2Fle9OMh5BKBwDv9ZJ1Z5y%2FvNd1tpQLqFn4eqjIzU094pFc8iPZsqxCV7X93kjX1FFZOhAe3miW6VVPRiOsl5uo8yEfHobu33O1x7p%2BKEx67xUYfmgh19NpNym4jl58veSgO3roLGVCXZDY42x40sphsnpXe6Lv3KGEzPImnWxGJUbgO73xV1NKtrL%2B05TnmIsaGVs5UMP5dboRVRoDu9f67VmBMUXtegwK2R6HWBpSo8%2B%2BhZNuKzeOIf%2BGq84m1EO0elZRrceNQzIEi9I0iIHqQYz2X2E3A%2FuaHSlWPlh%2FA0KtncotKP8G7yar9BpRF0pYaSpDla3t6yQ2xpHgKzIra48MzxWYq8isLdpqrjMeOdrml0yR6xYXlP07S7KjEWcQgnJ5swM6bwd6BGLlYZDAwHhrx56eryEvXGvjkb4bgqO%2BLFVF6HZlbFOtPRR%2Fdj9cbNs%2BV2bvTSI3wrLMHynb%2BHVfS3XJa97%2F34PlsmXraTVWI0lPc5d0uR2RWJgmaf2%2FtJqoB5awjVu3YdOxwJZhSn0D0mRmbwtfZQ8BLE%2FDsWWEPSSmEWV%2BC8" rel="nofollow" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=bar-back...

没见这样的，感觉是把多个图放到一起去了，然后共用一个Y轴。不过 echart 有个大概类似的，不知道适不适用。示例

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

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

第一种

#### <!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>

第二种:

https://echarts.apache.org/examples/zh/editor.html?c=bar-back...

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

第一种

第二种:

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？