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' , // 刻度标签的内容格式器},},
};

效果如图所示

3）附录

ECharts 提示框组件Tooltip属性大全（包含文本注释）

以上就是ECharts 柱状图横轴(X轴)文字内容显示不全的介绍，做此记录，如有帮助，欢迎点赞关注收藏！

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

echarty轴自定义显示不全,ECharts图表X轴或者Y轴单位内容显示不全
现在出现的问题是X轴单位内容显示不全主要代码如下:xAxis中的name为"时长(min)",但上图只显示了"时" grid: { left: '3%', r ...
【小5聊】echarts基础之x轴name值显示不全解决方法
1.x轴刻度单位名称不显示完全 2.解决方法,grid的left和right值进行调整 grid: {left: '3%',right: '4%',bottom: '3%',containLabel: ...
echarts的X轴文字倾斜显示、竖向显示、上下错开显示
在做柱状图的时候,X轴名称显示不全,设置X轴的rotate角度还是不行,后来加了一行 axisLabel:{interval:0,rotate:10 } 就好了,如以下两个图,上图是加了的,下图没加. ...
echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
Echarts 问题解决 —— 设置图例、提示框上下角标；坐标轴文字过多显示不全、文字竖直一列显示、让坐标轴类目隔一个换一行；
目录 1.设置图例.提示框上下角标 1.1 修改弹框内容的方法 1.2 修改图例文字的方法 1.3 在 rich 中单独设置角标 1.4 实战 2.坐标轴文字过多显示不全 2.1 方法一:将坐标轴上 ...
xmapp 查询文字内容显示乱码
我们使用xmapp工具的MySql数据库的时候会发现使用命令行查询出来的文字内容显示乱码,那么我们如何解决这些乱码文字呢??? 在我们启动数据库的时候设置相应格式 mysql -uroot -p111 ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...
html 横屏内容显示不全_为什么我的文本显示不全？
在实际工作中,经常会遇到文本显示不全的情况,比如表格里的文本显示不全等情况,你一般是怎么操作呢?本期与大家分享几种常见的原因. 1.Word表格文本显示不全如下图所示,表格里面的文本显示不全,这时该 ...
网页部分内容显示不全
一.bug描述下图为正常情况,一个网页主体宽度为1280px. 当缩小浏览器宽度,出现滚动条时,效果如下,右侧出现空白,导致内容显示不全. 二.bug重现和解决 1.代码如下 body中有一个灰色背 ...

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

1、问题描述

2、解决办法

1）更改grid布局

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

3）附录

以上就是ECharts 柱状图横轴(X轴)文字内容显示不全的介绍，做此记录，如有帮助，欢迎点赞关注收藏！

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

最新文章

热门文章