使用Echarts柱状图的时候,数据的x轴横坐标文字显示不全的问题
摘要:针对ECharts柱状图横坐标显示不全问题,提出了两种解决方案:1)强制显示所有标签但会导致重叠;2)通过标签旋转防止重叠,并调整标签位置和间距。后者在不压缩图表的情况下有效解决了坐标轴内容完整显示问题。
·
1、标题
ECharts在显示区域太小或数据内容过多的时候,柱状图横坐标内容显示不全,如下图所示:

2、解决
2.1在横坐标中添加interval: 0
xAxis: [
{
axisLabel: {
interval: 0, // 可以设置成0强制显示所有标签
}
}
],
横坐标现实全了但会重叠,如下图所示:

2.2 所以可以让文字倾斜以显示全,代码如下:
axisLabel: {
interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;
rotate: -50, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度
inside: false, // 刻度标签是否朝内,默认朝外
margin: 6, // 刻度标签与轴线之间的距离
}
效果图如下:

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)