乐趣区

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

jiezi

本文完整版：《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》

Echarts 是国内图表组件占有率最高的第三方库，在应用中咱们常常遇到 X 轴标签文字过长导致显示不全或 X 轴标签刻度距离不够的问题。本文具体解说 4 种标签超长显示问题的解决方案，轻松解决所有场景下的超长问题。

另外，这个世界曾经悄悄发生变化，当初基本无需写任何前端代码，间接应用卡拉云  —— 新一代低代码开发工具帮你搭建后盾工具，卡拉云可一键接入常见数据库及 API，无需懂前端，内置欠缺的各类前端组件，无需调试，拖拽即用。原来三天的工作量，当初 1 小时搞定，谁用谁晓得，用上早上班，详见本文文末。

咱们开始吧。

办法一：Echarts X 轴 标签歪斜摆放

我集体比拟喜爱 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 库测评 – 特地针对国内应用场景举荐》

办法二：Echarts X 轴 限度每行字数，换行显示

「换行显示标签」适宜按字数断句的场景，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 轴 垂直竖显文字

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

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 轴 隔行显示

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

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 标签文字超长的状况，尽管开源库曾经帮咱们解决了大部分造轮子的事，但总有些细枝末节的问题须要咱们本人手动解决。那么有没有一种齐全不必会前端，一行代码也不必写的办法，生成图表呢？这里举荐你应用卡拉云，卡拉云内置多种款式的图表，仅需鼠标拖拽即可生成，齐全不必懂任何前端。

卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。 原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。

扩大浏览：

  • Video.js 应用教程 – 手把手教你基于 Vue 搭建 HTML 5 视频播放器
  • 最好的 6 个收费天气 API 接口比照测评
  • 12 款最棒 Vue 开源 UI 库测评 – 特地针对国内应用场景举荐
  • 最棒的 7 个 Laravel admin 后盾管理系统举荐
  • Retool 是什么，怎么样？—— Retool 低代码工具测评
  • 最好用的 5 个 Vue select 单选多选下拉组件
  • 最好用的 7 款 Vue admin 后盾治理框架测评
退出移动版