ECharts 柱状图横轴(X轴)文字内容显示不全

发布日期: 2022-01-18

阅读次数:

1、问题描述

ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题，效果如下图所示。

2、解决办法

1）更改grid布局

原来布局

option = {
  grid: {
    top: '18%',
    left: '20%',
    right: '20%',
    bottom: '15%',
  },
};

更改后布局

option = {
  grid: {
    top: '18%',
    left: '10%',  // grid布局设置适当调整避免X轴文字只能部分显示
    right: '10%', // grid布局设置适当调整避免X轴文字只能部分显示
    bottom: '15%',
  },
};

调整后如下图所示

2）亦可能与坐标轴刻度标签的相关设置有关，适当调整

option = {
  xAxis: {
    type: 'category',
    data: [], 
    axisLabel: {
      show: true, // 是否显示刻度标签，默认显示
      interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
      rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
      inside: false, // 刻度标签是否朝内，默认朝外
      margin: 6, // 刻度标签与轴线之间的距离
      formatter: '{value} Day' , // 刻度标签的内容格式器
    },
  },
};