vue v-chart 线图 文本过长换行问题

之前后台说线图文本过长导致图不完整 希望可以文本换行，于是看了v-chart的官网

直接在data中设定charSettings

this.charSettings = {
      xAxisType: 'value',
      xAxis: {
        axisLabel: {
          interval: 0,
          //换行显示
          formatter: function(value) {
            let result = '' //拼接加\n返回的类目项
            let maxLength = 3 //每项显示文字个数
            let valLength = value.length //X轴类目项的文字个数
            let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowNumber > 1) {
              //如果文字大于3,
              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 '{labelText|' + result + '}'
            } else {
              return '{labelText|' + value + '}'
            }
          },
          rich: {
            labelText: {
              lineHeight: 18
            }
          }
        }
      },
      //y轴显示整数
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: function(value, index) {
            if (parseInt(value) != value) {
              return ''
            }
            return parseInt(value)
          }
        }
      }
    }

template中用extend

 <ve-histogram :data="charData" :extend="charSettings"></ve-histogram>