首页 前端知识 css-Echarts图表柱状图,X轴横坐标值显示不完全问题

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

2024-08-10 00:08:38 前端知识 前端哥 63 915 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15120.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!