v chart 柱状图 x轴文字显示不全

409 阅读1分钟

html:

<ve-histogram :data="histogramData" :extend="extend" />

第一种方法:斜着显示 data里写
this.extend = {
    xAxis: {
      axisLabel: {
       margin: 15,
       interval: 0,
       rotate: 60,
      },
       triggerEvent: true
     }
}

第二种方法:换行显示

this.extend = {
      xAxis: {
        axisLabel: {
          textStyle: {
            lineHeight: 16
          },
          interval: 0,
          formatter: function(value) {
             let result = '';
             let maxLength = 4;
             let valLength = value.length;
             let rowNumber = Math.ceil(valLength / maxLength);
            if (rowNumber > 1) {
              for (let i = 0; i < rowNumber; i++) { 
                let temp = ''; 
                let start = i * maxLength; 
                let end = start + maxLength; 
                temp = value.substring(start, end) + '\n'; 
                result += temp;
              }
              return result
            } else {
              return value
            }
          }
        }
      },
}