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

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

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

echarts X轴字数太长显示不全,使用省略显示全部内容_第1张图片

echarts X轴字数太长显示不全,使用省略显示全部内容_第2张图片

局部代码

tooltip: {
   trigger: 'axis',
   axisPointer: { // 坐标轴指示器,坐标轴触发有效
     type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
   },
   formatter: function(params) {
     // console.log('formatter', params) // 当我们想要自定义提示框内容时,可以先将鼠标悬浮的数据打印出来,然后根据需求提取出来即可
     let firstParams = params[0]
     return firstParams.name + '
'
+ '退款率:' + 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) + '...'), // 这种方法不可取 } ],

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

你可能感兴趣的:(Vue,js,echarts,echarts,前端,javascript)