ECharts图表x轴文字长度超出后不显示的解决办法！

方法1：

// 先定义好用于自定义样式的 rich

const rich = {

  b: {

    fontSize: 18,

    fontWeight: 'bold'

  },

  n: {

    fontSize: 14,

    lineHeight: 20

  }

}

// 【这是实现换行的关键函数】定义一个换用于换行的函数，意思就是每多少个字符 charQty 就换行

const makeMultiLine = (str, charQty) => {

  const strs = str.split('')

  const len = strs.length

  if (len < charQty + 1) {

    return str

  }

  let result = ''

  strs.forEach((_, index) => {

    result += _

    if ((index + 1) % charQty === 0 && index < len - 1) {

      result += '\n'

    }

  })

  return result

}

// ... 其他代码

// ... 其他代码

    xAxis: {

      show: true,

      axisLabel: {

        formatter: function (val) {

          // console.log(val)

          let str = makeMultiLine(val, 5) // 每 5 个字符一行

          return `{n|${str}}` // 使用 rich 中的 n 来设置样式

        },

        rich,

        interval: 0 // 显示所有的 x 轴上的文字不隐藏

      }

    },

// ... 其他代码

    label: {

      show: true,

      formatter: function (val) {

        let str = makeMultiLine(val.name, 5) // 每 5 个字符一行

        return `{n|${str}}\n\n{b|${val.percent}%}` // 使用 rich 中的 n 和 b 来对两段内容单独设置样式

      },

      rich

    }

// ... 其他代码

 

效果：

方法2：

 使用旋转X轴字体使字体倾斜显示

 // axisLabel:{ rotate : 9 ,interval:1 }