需求：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) + '...'), // 这种方法不可取 } ], 如果对你有用请点个赞在走呗，谢谢最美的你
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
