Echarts X轴文字自适应显示不被遮挡

近期Echarts图形化数据展示项目上线,导入了新的组织结构,奔溃了.

为啥?

第一,部门数量多,一些地方通过xAxis-axisLabel,可以实现超多部门的斜列显示,但是有些时候设置旋转角度不完全管用,比如下面说到了还有就是部门太密集重叠;

"xAxis": [{
                    "type": "category",
                    "axisLabel": {
                        "interval": 0,
                        "rotate": 30
                    },
                    "data": xData,
                }],

第二,旋转之后,部分名称较长的部门名称被截断遮掩了,即超出了容器的长度;

这个好烦,好不容易斜列显示了,一些名称太长的部门还是被截断了.

一开始,想着,不就容器高度不够吗,增加容器高度,和把Echarts实例的grid中的bottom底边值增加一些,这个方法确实可以实现,但是有两个缺陷:

1)这个是实打实的把空间设置出来了,如果都是名称较短的,那空出这一块空间,看着有点尬,其次如果调的空间比较多,整个版面会变得好大,美观性就可能...;

2)这个其实依旧是治标不治本,比如如果在来一个名称更长的,那不是一样被遮住?

有没有可自适应的容器高度的?用这个:containLabel: true,在Echarts实例的grid中,代码如下:

"grid": {
                    left: '4%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                     textStyle: {
                        color: "#fff"
                    }
                },

这样,会根据X轴标签的长度自适应调整整个画布的高度,首先会优先保证标签的显示完整.那么缺点就是,标签完整了,需要空间哪里来呢?Echarts会去动态的压缩画布绘制图形的大小,这算是一个缺点.

所以在做的时候,容器的高度还是适当把控下,但是这个设置好用,毕竟出现长名称的X轴可能性少一点.

所以碰到上面X轴被遮掩的问题,基本上结合这两个设置,就可以搞定.

"grid": {
                    left: '4%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                     textStyle: {
                        color: "#fff"
                    }
                },
"xAxis": [{
                    "type": "category",
                    "axisLabel": {
                        "interval": 0,
                        "rotate": 30
                    },
                    "data": xData,
                }],