问题:在做数据展示的时候,使用的是echarts,遇到了个问题,就是数据过多,但是设置的x轴的文字名称又太长,往往左边第一个或右边最后一个的名称展示不全,只有半个。
从网上找到了几种办法,但是最总实现的效果不能通过。
导致这个问题的原因就是,最边上的那条数据的宽度太小了,名称又远远超过这个宽度,再加上echarts默认的x轴文字是居中显示的。所以有一侧的名称显示不全。
解决办法:
-
配置option设置中的grid;这个是设置图表四周的padding的,将左边或右边的padding增加到能显示全名称就行了。
grid: {top: '10', // 距离容器上边界的距离right: '30', // 距离容器右边界的距离bottom: '0', // 距离容器下边界的距离left: '0', // 距离容器左边界的距离containLabel: true, // 包含标签的绘图区域},
-
x轴名称倾斜展示。在options配置中的xAxis中配置如下代码:
axisLabel: {interval: 0,rotate: 40,},
-
名称竖直显示。在options配置中的xAxis中配置如下代码:
axisLabel: {interval: 0,formatter: function (value) {return value.split("").join("\n");},}
-
在特定文字后面加换行处理。在options配置中的xAxis中配置如下代码:
axisLabel: {interval: 0,lineHeight: 18,formatter: function (value) {return value.split("_").join("_\n");},},
后面三种方法全是从网上找到的:vue——echarts柱状图横轴文字太多放不下【处理办法】_echarts柱状图横坐标文字太长放不下两行放-CSDN博客