需求:echarts
X轴字数太长显示不全,产品经理需要把多余的省略掉,然后鼠标悬浮的时候显示全部内容
先说一下我的解决思路吧
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) + '...'), // 这种方法不可取
}
],