css-Echarts图表柱状图,X轴横坐标值显示不完全问题

1.问题

        在Echarts图表中当横坐标数值过多,或者数值过长时会导致部分横坐标不显示。数据量少或简单会默认显示完全,当放大时会导致部分横坐标隐藏。

更改第一个Mon字段名

        会发现偶数横坐标显示隐藏;

2.解决方法

2.1 在x横坐标中添加interval: 0

        无论在何种分辨率下横向坐标都会显示完全

 // 横向坐标
 xAxis:[
          {
             type: 'category',
             axisLabel: {
               interval: 0,
             }
          }
       ]
2.2 横向坐标字体值设置为以rem单位

  rem 是CSS3引入的一个相对长度单位,它是相对于根元素(即<html>元素)的字体大小来计算的。rem 的全称是 "root em",它的设计初衷是为了提供一种相对于根元素字体大小进行缩放的灵活方式,以便于实现响应式设计和适配不同屏幕尺寸

通常会将根元素的字体大小设置为一个固定的基准值(如16px)

 // 横向坐标
    xAxis: [
            {
                type: 'category',
                axisLabel: {
                    interval: 0,
                    fontSize:'0.8rem',
                }
            }
        ]
2.3 限制一定字数以防超出重叠

substr 是JavaScript中的一个字符串方法,用于提取字符串中从指定位置开始的指定长度的子字符串。

str.substr(start[, length])

         start必需,表示要提取的子字符串的起始位置。如果为负数,则从字符串的末尾开始计算位置(例如,-1表示最后一个字符)。

   length可选,表示要提取的子字符串的长度。如果省略此参数,则提取从起始位置到字符串末尾的所有字符。

 // 横向坐标
            xAxis: [
            {
                type: 'category',
                axisLabel: {
                    interval: 0,
                    fontSize:'0.8rem',
                    color: '#999999',
                    formatter: function (value, index) {
                        if(value.length>15){
                            return value.substr(0,10)+'...'
                        }else{
                            return value
                        }
                    }
                },
            }
        ]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值