首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >ECharts 柱状图横轴(X轴)文字内容显示不全

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

作者头像
GoodTime
发布2024-03-05 15:49:07
发布2024-03-05 15:49:07
3K0
举报

1、问题描述

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

2、解决办法

1)更改grid布局

原来布局

代码语言:javascript
复制
option = {
  grid: {
    top: '18%',
    left: '20%',
    right: '20%',
    bottom: '15%',
  },
};

更改后布局

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

调整后如下图所示

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

效果如图所示

以上就是ECharts 柱状图横轴(X轴)文字内容显示不全的介绍,做此记录,如有帮助,欢迎点赞关注收藏!
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、问题描述
  • 2、解决办法
    • 1)更改grid布局
    • 2)亦可能与坐标轴刻度标签的相关设置有关,适当调整
    • 以上就是ECharts 柱状图横轴(X轴)文字内容显示不全的介绍,做此记录,如有帮助,欢迎点赞关注收藏!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档