首页 前端知识 echarts柱状图X轴底部文字 部分不显示出来?

echarts柱状图X轴底部文字 部分不显示出来?

2024-09-21 22:09:41 前端知识 前端哥 771 815 我要收藏

第一种情况:隔行消失

   处理方案==> 截掉超出的文字 加入省略号

   加入之后 可能! 会存在文字隔行消失的情况  加上 interval: 0 

            axisLabel: {
              interval: 0, // 强制文字产生间隔
              rotate: 0, // 文字逆时针旋转45°
              textStyle: {
                // 文字样式
                color: '#fff',
                fontSize: 16,
                // fontFamily: 'Microsoft YaHei'
              },
              show: true,
              formatter(value) {
                let str = value;
                if (value.length > 8) {
                  str = value.slice(0, 7) + '...';
                }
                return str;
              },
            },

第二种处理方式:旋转

xAxis: [
    {
      type: 'category',
      rotate: -25 // 旋转角度
    }
  ]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18545.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!