本文介绍Echarts中X/Y轴坐标标签因内容过长导致显示不全的两种处理方案。针对长标签，通过axisLabel.formatter自定义截取并配合tooltip悬浮显示；针对短标签，利用rotate旋转或调整grid间距优化布局，确保图表清晰可读。
长标签处理：格式化与悬浮提示
解决Echarts中X轴或Y轴坐标标签因内容过长而显示不全的问题。
xAxis:[
{
//目录轴
type:"category",
//数据
data: data.map(i=>i.location+" -- "+i.city_name),
//轴标签
axisLabel:{
//格式化
formatter: function (params) {
var val = "";
//判断长度
if (params.length > 4) {
//替换原字符
val = params.substr(0, 4) + '...';
//返回
return val;
} else {
//否则返回原string
return params;
}
}
}
}
],仅靠格式化可能还不够，需要结合其他配置。
可以通过配置tooltip实现鼠标悬浮时显示完整的X轴坐标名称。
tooltip: {
trigger: 'axis', //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},参考相关效果示意图。
短标签处理：旋转与布局调整
解决Echarts中X轴或Y轴坐标标签显示不全的另一种情况，适用于标签长度适中的场景。
xAxis: {
type: 'category',
name: "公司名",
data: myData.map(elem => elem.name),
axisLabel: {
interval: 0,
rotate: 30 //可以通过旋转解决标签显示不下的问题
}
}此时可能会发现图表区域过大，导致视觉重心偏移，需要将图表整体向上移动以优化布局。
首先通过width和height属性设置图表的宽高，并为所有相关图表容器添加统一的class样式。
.box{
width: 1000px;
height: 500px;
}接着通过调整grid配置项来移动图表位置。
grid: {
left: "15%",
bottom:'38%'
}查看调整后的效果示意图。
本文关于Echarts中X/Y轴坐标标签显示不全问题的解决方案介绍完毕，更多相关Echarts坐标标签显示内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！