x轴文字过长换行重叠

冯小小猿

已于 2023-02-08 16:50:21 修改

阅读量248

点赞数

文章标签： echarts 前端 javascript

于 2023-02-08 16:50:00 首次发布

本文链接：https://blog.csdn.net/qq_38735381/article/details/128288312

版权

文章介绍了处理Echarts图表中x轴标签文字过长引起重叠的四种方法，包括倾斜、换行、垂直显示和隔行显示。并提供了一个根据特定分隔符（如“-”）进行换行显示的示例代码，通过调整`formatter`函数实现标签文本的自动换行。

摘要由CSDN通过智能技术生成

之前看的一些文章的echarts的x轴文字过长导致重叠的问题，差不多有四种办法：倾斜摆放，换行显示，垂直竖显文字，隔行显示。

这里再根据写一个根据某个字段换行的写法。

我这里写的是根据“-”进行分割，然后加个“\n”再拼接起来。效果如下：

option = {
  xAxis: {
    type: 'category',
     axisLabel:{ 
                interval: 0,
                formatter: function (value, index) { //关键代码
                  let num = value.length;
                  console.log(value)
                  if(num>10||num==10){
                    let str1 = '('+value.substring(0, value.indexOf("-"))+")";
                    let str2 = value.substring(value.indexOf("-")+1);
                    return str1+"\n"+str2;
                  }else {
                    return value;
                  }
                }
              },
    data: ['Mon', '1234567890-一二三四五六七八九十', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};