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

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年04月01日

echart

Echarts 是国内图表组件占有率最高的第三方库,在使用中我们经常遇到 X 轴标签文字过长导致显示不全或 X 轴标签刻度间隔不够的问题。本文详细讲解 4 种标签超长显示问题的解决方案,轻松解决所有场景下的超长问题。

另外,这个世界已经悄然发生变化,现在根本无需写任何前端代码,直接使用卡拉云  —— 新一代低代码开发工具帮你搭建后台工具,卡拉云可一键接入常见数据库及 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]
    }
  ]
});
  • rotate 调整 X 轴标签倾斜角度,一般倾斜 45 度就能完美解决 X 轴标签超长显示问题
  • interval 间隔显示。0 为显示所有 X 轴标签,1 为空一个显示一个等

扩展阅读:《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

调试 Vue 图表很痛苦?

试用卡拉云,无需懂前端,拖拽组件连接 API 和数据库直接生成各类带图表的后台管理工具,将两个月的工期降低至两天

方法二:Echarts X 轴 限制每行字数,换行显示

echarts-transverse

「换行显示标签」适合按字数断句的场景,X 轴每个标签都是前 N 个字一断是一个完整的词时,特别适合这种场景实用。

myChart.setOption({
  title: { text: '卡拉云 - 销售团队情况汇总' },
  tooltip: {},
  xAxis: {
    data: [
      '蒋铁柱团队',
      '谢国庆团队',
      '卡拉云小火箭',
      '木棉花团队',
      '橘子可乐团队',
      '太阳花团队',
      '蒸汽火车团队',
      '金元宝团队'
    ],
    name: '团队名', // X 坐标轴名称
    nameLocation: 'end', // 名称显示在 X 坐标轴的位置

    axisLabel: {
      formatter: function (params) {
        var newParamsName = ''; // 拼接后的新字符串
        var paramsNameNumber = params.length; // 实际标签数
        var provideNumber = 3; // 每行显示的字数
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回,算出要显示的行数

        if (paramsNameNumber > provideNumber) {
          /** 循环每一行,p表示行 */

          for (var i = 0; i < rowNumber; i++) {
            var tempStr = ''; // 每次截取的字符串
            var start = i * provideNumber; // 截取位置开始
            var end = start + provideNumber; // 截取位置结束

            // 最后一行的需要单独处理

            if (i == rowNumber - 1) {
              tempStr = params.substring(start, paramsNameNumber);
            } else {
              tempStr = params.substring(start, end) + '\n';
            }
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }

        return newParamsName;
      }
    }
  },
  yAxis: {},
  series: [
    {
      name: '数量',
      type: 'bar',
      data: [67, 93, 45, 23, 77, 85, 55, 17]
    }
  ]
});
  • 使用 formatter 函数实现换行

扩展阅读:《最棒的 7 个 Laravel admin 后台管理系统推荐

方法三:Echarts X 轴 垂直竖显文字

echarts-perpendicular

「垂直显示标签」的情况,显得更正式一些。

myChart.setOption({
  title: { text: '卡拉云 - 销售团队情况汇总' },
  tooltip: {},
  xAxis: {
    data: [
      '蒋铁柱团队',
      '谢国庆团队',
      '卡拉云小火箭',
      '木棉花团队',
      '橘子可乐团队',
      '太阳花团队',
      '蒸汽火车团队',
      '金元宝团队'
    ],
    name: '团队名', // X 坐标轴名称
    nameLocation: 'end', // 名称显示在 X 坐标轴的位置

    axisLabel: {
      interval: 0,
      formatter: function (value) {
        return value.split('').join('\n');
      }
    }
  },
  yAxis: {},
  series: [
    {
      name: '数量',
      type: 'bar',
      data: [67, 93, 45, 23, 77, 85, 55, 17]
    }
  ]
});
  • 使用 formatter 函数实现换行,这里是每个字一行的形式进行换行。

扩展阅读:《最好用的 6 款 Vue 拖拽组件库推荐

方法四:Echarts X 轴 隔行显示

echarts-repeat

「间隔显示标签」是标签错落有致的显示在页面上。

myChart.setOption({
  title: { text: '卡拉云 - 销售团队情况汇总' },
  tooltip: {},
  xAxis: {
    data: [
      '蒋铁柱团队',
      '谢国庆团队',
      '卡拉云小火箭',
      '木棉花团队',
      '橘子可乐团队',
      '太阳花团队',
      '蒸汽火车团队',
      '金元宝团队'
    ],
    name: '团队名', // X 坐标轴名称
    nameLocation: 'end', // 名称显示在 X 坐标轴的位置

    axisLabel: {
      clickable: true,
      interval: 0,
      formatter: function (params, index) {
        if (index % 2 != 0) {
          return '\n\n' + params;
        } else {
          return params;
        }
      }
    }
  },
  yAxis: {},
  series: [
    {
      name: '数量',
      type: 'bar',
      data: [67, 93, 45, 23, 77, 85, 55, 17]
    }
  ]
});

扩展阅读:《Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能

使用「卡拉云」直接生成图表

本文介绍了如何解决在 Vue 中 ECharts 标签文字超长的情况,虽然开源库已经帮我们解决了大部分造轮子的事,但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端,一行代码也不用写的方法,生成图表呢?这里推荐你使用卡拉云,卡拉云内置多种样式的图表,仅需鼠标拖拽即可生成,完全不用懂任何前端。

kalacloud-charts.gif

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云

一起交流

wechat-jiangchuan

蒋川,卡拉云联合创始人,B 端数据开发。

如果你有任何问题,欢迎添加微信一起交流。我的微信 HiJiangChuan

扩展阅读: