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

目录
相关文章
|
8月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
297 0
|
4月前
Echarts中横坐标文字显示不全
本文讨论了在ECharts中横坐标文字显示不全的问题,并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后,横坐标上的所有标签都会显示,而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法,并附有官方文档链接。
153 4
Echarts中横坐标文字显示不全
|
3月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
188 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
3月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
937 0
|
5月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
169 0
|
6月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
553 0
|
7月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
99 0
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
|
8月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
8月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
1312 0