柱状图X轴文字竖排显示与行高修改，Echarts轻松搞定

2023-02-17 18:59:33

使用 echarts 制作令人惊叹的纵向 X 轴柱状图

简介

echarts 是一个流行的数据可视化库，以其丰富的图表类型和强大的交互功能而闻名。柱状图是 echarts 中最常见的图表类型之一，广泛用于比较数据和分析趋势。为了让你的柱状图脱颖而出，掌握一些技巧以实现纵向 X 轴显示、调整行高和设置边距至关重要。

纵向 X 轴文字

1. 设置坐标轴标签方向

将 X 轴标签旋转 90 度可以实现纵向显示。

xAxis: {
  axisLabel: {
    rotate: 90,
  },
},

2. 使用 formatter 自定义标签格式

如果标签文本过长，旋转后可能会重叠。使用 formatter 可以换行显示标签。

xAxis: {
  axisLabel: {
    rotate: 90,
    formatter: function (value) {
      return value.split("").join("\n");
    },
  },
},

X 轴行高调整

1. 设置坐标轴标签行高

增加标签行高（即标签之间的间距）可以提高纵向显示标签的可读性。

xAxis: {
  axisLabel: {
    rotate: 90,
    margin: 8,
  },
},

2. 使用 formatter 添加标签换行符

在标签文本中添加换行符也可以调整行高。

xAxis: {
  axisLabel: {
    rotate: 90,
    formatter: function (value) {
      return value.split("").join("\n\n");
    },
  },
},

柱状图边距设置

1. 设置 containLabel 防止标签溢出

当标签过长时，将标签包含在图表区域内可以防止其溢出。

grid: {
  containLabel: true,
},

2. 设置 left、right、top、bottom 边距

调整图表区域周围的边距可以为标签留出更多空间。

grid: {
  left: 20,
  right: 20,
  top: 20,
  bottom: 20,
},

示例代码：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  xAxis: {
    axisLabel: {
      rotate: 90,
      margin: 8,
    },
  },
  yAxis: {
    data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  },
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50, 60, 70],
  }],
  grid: {
    containLabel: true,
  },
};

myChart.setOption(option);