echart 设置 Y轴标签在柱状图上垂直居中失效

置顶易函123

于 2020-10-29 21:11:19 发布

阅读量2k

点赞数 1

分类专栏： 2020 笔记文章标签： javascript echarts

本文链接：https://blog.youkuaiyun.com/qq_43485006/article/details/109370200

版权

笔记同时被 2 个专栏收录

61 篇文章

订阅专栏

2020

47 篇文章

订阅专栏

在ECharts中遇到Y轴标签无法垂直居中的问题，即使设置了`verticalAlign: 'middle'`也无效。解决方法是通过调整`axisLabel`的`textStyle`属性，增加`lineHeight`属性，例如：`lineHeight: 9`，以实现标签的垂直居中对齐。确保同时设置合适的`fontSize`，以保持标签的清晰可读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

yAxis: {
      type: 'category',
      data: yAxis,
      axisLabel: {
        inside: true,
        *verticalAlign: 'middle'*
        // 文档中应该是这个属性来设置垂直居中，但是未生效
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
        },
      },
      zlevel: 1,
    },

解决

设置textStyle lineHeight

axisLabel:{
       textStyle:{
          color: "#444",
          fontSize: 8,
          lineHeight: 9
       },
}

echart 设置 Y轴标签在柱状图上垂直居中失效

echart 设置 Y轴标签在柱状图上垂直居中 失效

问题

解决

echart 设置 Y轴标签在柱状图上垂直居中失效