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

最新推荐文章于 2024-10-06 15:05:04 发布

非线性定语从句

最新推荐文章于 2024-10-06 15:05:04 发布

阅读量2.7k

点赞数 1

文章标签： echarts javascript

本文链接：https://blog.csdn.net/weixin_44492275/article/details/122412280

版权

在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',
          }
        ]
      };