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

当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:
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值