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

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

问题


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


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

20191202162928584.png


解决方案


方案一:旋转

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


20191202162959393.png


方案二:省略号

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

20191202162818686.png

目录
相关文章
|
4月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
4月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
61 0
|
4月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
4月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图
|
5月前
|
JSON 数据可视化 JavaScript
vue+echarts实现一个叠堆柱状图
vue+echarts实现一个叠堆柱状图
47 0
|
5月前
关于Echarts柱状图监听点击事件的实现方法
关于Echarts柱状图监听点击事件的实现方法
111 0
|
5月前
|
JSON 数据格式
Echarts+ajax实现叠堆柱状图
Echarts+ajax实现叠堆柱状图
28 0
|
5月前
Echarts柱状图折线图混合使用
Echarts柱状图折线图混合使用
63 0
|
5月前
echarts设置柱状图柱状图粗细大小
echarts设置柱状图柱状图粗细大小
47 1
|
5月前
|
BI
echarts柱状图实现颜色渐变效果
echarts柱状图实现颜色渐变效果
52 1