echarts - 怎么自动计算 ECharts X轴名称的 nameGap ？

Question

如图，当 X 轴名称位置为中间的时候，此时设置 label 旋转，会和名称重合，
目前找到的办法是设置 nameGap 属性，但是 label 数据是动态的，所以 nameGap 也无法设置为一个具体的值，有办法自动计算 nameGap 或者使用其他办法解决这个问题么？

谢谢

https://codepen.io/hungtcs-the-sasster/pen/RwemLPo

Answer 1

label文件较多，可以考虑换行显示，可以在axisLabel属性里面加一个formatter函数进行换行操作即可

axisLabel: {
       rotate: 90,
       formatter: function (params) {
         var newParamsName = "";
         var paramsNameNumber = params.length;
         var provideNumber = 3; // 一行显示几个字 然后就超过字数就会自动换行
         var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
         if (paramsNameNumber > provideNumber) {
           for (var p = 0; p < rowNumber; p++) {
             var tempStr = "";
             var start = p * provideNumber;
             var end = start + provideNumber;
             if (p == rowNumber - 1) {
               tempStr = params.substring(start, paramsNameNumber);
             } else {
               tempStr = params.substring(start, end) + "\n";
             }
             newParamsName += tempStr;
           }
         } else {
           newParamsName = params;
         }
         return newParamsName;
       }
     }

Answer 2

let labels = ['标签1', '标签2', '标签3'];
let maxWidth = 0;
labels.forEach(label => {
  let width = echarts.graphic.getTextWidth(label, '14px Arial');
  if (width > maxWidth) {
    maxWidth = width;
  }
});

let nameGap = Math.ceil(maxWidth / 2);
let option = {
  xAxis: {
    type: 'category',
    data: labels,
    axisLabel: {
      interval: 0,
      rotate: -30,
      margin: 20,
    },
    nameGap: nameGap,
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: [10, 20, 30],
    },
  ],
};

let chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

使用echarts.graphic.getTextWidth方法获取每个标签的宽度把所有标签的宽度中的最大值存储在maxWidth中。然后计算nameGap的值，并将其设置为X轴的nameGap属性。