旭东怪 2020-03-25 15:02 采纳率: 0%
浏览 959

echarts x轴分两级显示,并且第二级可以设置任意间隔

我在网上只找到x轴可以分两级显示,但是第二级平均分配间隔的方法
https://blog.csdn.net/u013270065/article/details/105073901/
我想要达到的效果如下图
图片说明

可以看看这个ECharts实例,实现了分两级显示并且第二级可以自定义间隔https://gallery.echartsjs.com/editor.html?c=xnUHWTiDTY
图片说明

  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-17 04:14
    关注

    参考GPT和自己的思路:

    你好!针对你提出的问题,我可以给你以下回答:

    首先,在 ECharts 中实现 x 轴分两级显示,需要使用到 axis.label 里的 formatter 属性,并设置其返回一个数组。例如:

    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        formatter: function (value, index) {
          let firstLevel = ['周一', '周二', '周三'];
          if (firstLevel.indexOf(value) > -1) {
            return value + '\n\n'; // 第一级数据换行
          } else {
            return value; // 第二级数据
          }
        }
      }
    },
    

    然后,在第二级数据中设置自定义间隔,也需要使用 axis.label 里的 formatter 属性,并使用 index 参数判断每个数据点位置。例如:

    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        formatter: function (value, index) {
          let firstLevel = ['周一', '周二', '周三'];
          if (firstLevel.indexOf(value) > -1) {
            return value + '\n\n';
          } else {
            if (index % 2 === 0) {
              return value + '\n'; // 第二级间隔为 2
            } else {
              return value;
            }
          }
        }
      }
    },
    

    结合以上两段代码即可实现你要达到的效果。希望我的回答能够对你有所帮助!

    评论

报告相同问题?

悬赏问题

  • ¥15 imageEnView绘图问题
  • ¥60 最新ukb数据下载方法
  • ¥15 关于#python#的问题:您好可以加您一下联系方式吗,在复现的时候确实有点问题难以解决
  • ¥15 联想电脑重装系统时无法发现硬盘
  • ¥15 MATLAB与UR10e实体机械臂建立通讯
  • ¥15 c++题需要快一点不用opencv
  • ¥15 关于#java#的问题:想要咨询Flowable流程引擎框架的问题
  • ¥15 vscode里面怎么用plaformio强调串口啊
  • ¥20 针对计算后数据做一致性检验可以用Bland Altman法吗
  • ¥15 win32如何自绘编辑框的背景图片(语言-c++|操作系统-windows)