echarts X轴字数太长显示不全，使用省略显示全部内容

需求：echartsX轴字数太长显示不全，产品经理需要把多余的省略掉，然后鼠标悬浮的时候显示全部内容

先说一下我的解决思路吧
1.我先想到的是将xAxis里的data数据截取前六位，然后使用.substring(0, 6) + '...'字符串截取去显示，发现不可行，因为那样鼠标悬浮还是会被截取掉的
2.xAxis不行之后，我又想着tooltip,可是下面X轴又没解决，在怎么看tooltip也白搭，问题不在这里
3.又回到X轴的xAxis里去了，想到之前X轴显示不全斜着放，超过指定字数可以换行这里，灵感就来了

tooltip: {
   trigger: 'axis',
   axisPointer: { // 坐标轴指示器，坐标轴触发有效
     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
   },
   formatter: function(params) {
     // console.log('formatter', params) // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
     let firstParams = params[0]
     return firstParams.name + '<br>' + '退款率：' + firstParams.data + ' %'
   }
 },
xAxis: [
    {
       name: '物流方式',
       type: 'category',
       // show: false, // 是否显示X轴
       axisLabel: {
         show: true, // 是否显示X轴的内容，不包含两端的文字
         interval: 0,
         // rotate: '50', // 旋转50°
         lineHeight: 18,
         formatter: function(params) {
           console.log('formatter', params, params.length)
           var newParamsName = ''// 最终拼接成的字符串
           var paramsNameNumber = params.length// 实际标签的个数
           var provideNumber = 6// 每行能显示的字的个数
           // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
           if (paramsNameNumber > provideNumber) {
           // ********重点在这里********
             newParamsName = params.substring(0, 6) + '..'// 最终拼成的字符串
           } else { // 将旧标签的值赋给新标签
             newParamsName = params
           }
           // 将最终的字符串返回
           return newParamsName
         }
       },
       // data:接口的值 [33.33, 28.57, 27.27, 25, 25],
       data: data.data.map(item => item.shippingmethod)
       // data: data.data.map(item => item.shippingmethod.substring(0, 6) + '...'), // 这种方法不可取
     }
   ],

原文: https://blog.csdn.net/qq_45094682/article/details/122703862