欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts柱状图X轴底部文字有的不显示出来?

程序员文章站 2022-07-06 09:42:08
...

问题

在vue里使用echarts框架时遇到柱状图X轴底部文字有的不显示出来?

如图:(住房与城乡建设没有显示出来)

echarts柱状图X轴底部文字有的不显示出来?

解决方案

方案一:旋转

// 在setOption里配置xAxis
let option = {
  xAxis: [
    {
      type: 'category',
      rotate: -25 // 旋转角度
    }
  ]
}

echarts柱状图X轴底部文字有的不显示出来?

方案二:省略号

// 在setOption里配置xAxis
let option = {
  xAxis: [
    {
      type: 'category',
      // 书写格式
      axisLabel: {
        formatter: val => {
          let txt = val
          if (val.length > 3) {
            txt = val.substr(0, 3) + '...'
          }
          return txt
        }
      }
    }
  ]
}

echarts柱状图X轴底部文字有的不显示出来?

相关标签: echarts