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

最新推荐文章于 2024-05-08 17:21:19 发布

andy5520

最新推荐文章于 2024-05-08 17:21:19 发布

阅读量5.8k

点赞数

分类专栏：前端文章标签： ECharts X轴显示不全图表

本文链接：https://blog.csdn.net/andy5520/article/details/106619927

版权

当ECharts图表的X轴文字长度过长时，可能导致显示不全的问题。通过设置axisLabel的rotate属性为9并调整interval，可以实现X轴文字的倾斜显示，从而避免文字重叠。

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

方法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: