问答

echarts的x轴,文字过长,影响了axisLine,如何控制?

作者:admin 2021-07-28 我要评论

x轴的标签是通过后端获取的,有时候文字过长,就会导致x轴线被往上压,请问要如何才能控制x轴不被往上压呢? ================================================...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

x轴的标签是通过后端获取的,有时候文字过长,就会导致x轴线被往上压,请问要如何才能控制x轴不被往上压呢?
image.png

======================================================================================================================

调整了grid,还是会有不对齐的情况,也许是因为有些数据过长导致的
image.png

目前我的解决方案,暂时是使用formatter来解决的,有更好的解决方法的,求大神指教!
大致思路就是:使用formatter,规定这一行图表里面,xAxisLabel的文字长度,如果超出,则使用省略号,这样就可以保证label的高度是一致的。
image.png

option = {
    xAxis: {
        axisLabel: {
            rotate: -30,
            formatter: function(value, index) {
                // 超出8个字符后面就用省略号代替
                if(value.length > 8) {
                    let v = value.slice(0, 7) + '...'
                    return v
                } else {
                    return value
                }
            }
        }
    }
}

======================================================================================================================

再补充一下,因为后面遇到了label可能为中文的情况,而中文的文字大小跟英文不一致,所以需要再做一个判断

option = {
    xAxis: {
        axisLabel: {
            rotate: -30,
            formatter: function(value, index) {
                // 中文的范围(正则)
                let pattern = new RegExp("[\u4E00-\u9FA5]+")
                let v = ''
                // 超出8个字符后面就用省略号代替
                if(value.length > 8) {
                    if(pattern.test(value)) {
                        v = value.slice(0, 3) + '...'
                    } else {
                        v = value.slice(0, 7) + '...'
                    }
                    return v
                } else {
                    return value
                }
            }
        }
    }
}

====================================================================================================================
今天看文档发现xAxis.offset似乎也可以解决问题,设置的是x轴线与图的偏移量,没有做具体尝试。

###

grid: {

left: '10%',  
bottom: '40%'

}
设置grid距离底部的高度

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • echarts的x轴,文字过长,影响了axisLi

    echarts的x轴,文字过长,影响了axisLi

  • css无法覆写问题

    css无法覆写问题

  • MongoDB集群分片shard下数据目录存储格

    MongoDB集群分片shard下数据目录存储格

  • 如何用flutter实现如下的界面效果

    如何用flutter实现如下的界面效果

腾讯云代理商
海外云服务器