echarts柱状图x轴 label一行超过设置的字数换行

在echart官网找了好久只能倾斜 但有的时候倾斜也放不下所有的字
幸好echart提供了formatter

xAxis: [
          {
            type: 'category',
            data: ['啊啊啊啊阿', '不不不不不不不', '啛啛喳喳错错错'],
            axisLabel: {
              fontSize: 11,
              // 更改显示文字显示形态 让他每三个字符就换行
              formatter:function(value){
              	//rowMAx 控制一行多少字
                let rowMAx = 4
                let overValue = ''
                for (let i = 0; i < value.length; i++) {
                  if((i % rowMAx == 0) && (i != 0)){
                    overValue += '\n'
                    overValue += value[i]
                  } else {
                    overValue += value[i]
                  }
                }
                return overValue
              }
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],

我写的option的配置

option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          top:10,
          data: ['是是是是', '哎哎哎', '嘎嘎嘎嘎嘎']
        },
        xAxis: [
          {
            type: 'category',
            data: ['啊啊啊啊阿', '不不不不不不不', '不不不不不不不'],
            axisLabel: {
              fontSize: 11,
              // 更改显示文字显示形态 让他每三个字符就换行
              formatter:function(value){
                let rowMAx = 4
                let overValue = ''
                for (let i = 0; i < value.length; i++) {
                  if((i % rowMAx == 0) && (i != 0)){
                    overValue += '\n'
                    overValue += value[i]
                  } else {
                    overValue += value[i]
                  }
                }
                return overValue
              }
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 700,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 70,
            interval: 10,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            // 按照 左边 进行的
            name: '是是是是',
            barGap: 0,
            type: 'bar',
            data: [20, 49, 70],
            color:'#4F81BD',
          },
          { 
            // 按照 左边 进行的
            name: '哎哎哎',
            barGap: 0,
            type: 'bar',
            data: [26, 59, 90],
            color:'#C0504D',
          },
          {
            // 按照 右边 % 进行的
            name: '嘎嘎嘎嘎嘎',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 22, 1],
            color:'#BDD095',
          }
        ]
      };

效果图 每四个字换行
在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值