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

47 篇文章 3 订阅
18 篇文章 0 订阅

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

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

etcharts

echarts

局部代码

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) + '...'), // 这种方法不可取
     }
   ],

如果对你有用请点个赞在走呗,谢谢最美的你

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值