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

哟哟耶耶

于 2024-06-18 17:05:29 发布

阅读量922

点赞数 4

分类专栏： css 文章标签： css echarts 前端

本文链接：https://blog.csdn.net/2301_76671906/article/details/139777965

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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
                        }
                    }
                },
            }
        ]