首页 前端知识 echarts图表的label太长解决办法

echarts图表的label太长解决办法

2024-05-05 12:05:56 前端知识 前端哥 879 402 我要收藏

如图,这个echarts图标的y轴label文字因为太长显示不全,这时我们可以选择使用formatter换行显示,具体代码如下:

yAxis: {
      type: 'category',
      data: ['火灾', '洪涝', '急救', '消防', '公安'],
      axisLabel : {
        formatter:function(value){  //换行显示
          return value.split("").join("\n");  
        }, 
        textStyle: {
          color: '#03b3ef'
        }
      }
    },

换行之后如下,还是因为位置太小,有的label没有显示

 

 那么我们再旋转角度,倾斜显示,代码如下:

yAxis: {
      type: 'category',
      data: ['火灾', '洪涝', '急救', '消防', '公安'],
      axisLabel : {
        interval: 0,//横轴信息全部显示
        rotate: -45,//旋转45度显示
        formatter:function(value){  //换行显示
          return value.split("").join("\n");  
        }, 
        textStyle: {
          color: '#03b3ef'
        }
      }
    },

结果如图,正常了

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6908.html
标签
评论
发布的文章

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!