ECharts X 轴标签过长导致文字重叠的 4 种解决方案

最新推荐文章于 2025-04-15 14:41:36 发布

codingboy333

最新推荐文章于 2025-04-15 14:41:36 发布

阅读量8.3k

点赞数 6

分类专栏：卡拉云文章标签： vue.js echarts

本文链接：https://blog.csdn.net/codingboy333/article/details/124343889

版权

本文提供了4种解决ECharts X轴标签过长导致文字重叠的方案：1) 标签倾斜摆放；2) 限制每行字数换行显示；3) 垂直竖显文字；4) 隔行显示。此外，推荐使用卡拉云快速生成图表，无需前端开发。

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

echart

另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置完善的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，用上早下班，详见本文文末。

我们开始吧。

方法一：Echarts X 轴标签倾斜摆放

echarts-45

我个人比较喜欢 45 度倾斜显示，兼顾美观的前提下解决 echarts X 轴标签文字过多导致的显示不全。

myChart.setOption({
  title: { text: '卡拉云 - 销售团队情况汇总' },
  tooltip: {},
  xAxis: {
    data: [
      '蒋铁柱团队',
      '谢国庆团队',
      '卡拉云小火箭',
      '木棉花团队',
      '橘子可乐团队',
      '太阳花团队',
      '蒸汽火车团队',
      '金元宝团队'
    ],
    name: '团队名', // X 坐标轴名称
    nameLocation: 'end', // 名称显示在 X 坐标轴的位置
    axisLabel: {
      //  X 坐标轴标签相关设置
      interval: 0,
      rotate: '45'
    }
  },
  yAxis: {},
  series: [
    {
      name: '数量',
      type: 'bar',
      data: [67, 93, 45, 23, 77, 85, 55, 17]
    }
  ]
});