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 }