坐标轴的数据过长分行显示/调整分行后的行间距

GllWyz

已于 2022-03-30 21:11:21 修改

阅读量542

点赞数 2

分类专栏： # Echart 文章标签： echarts对数据进行分行

于 2021-11-24 18:32:32 首次发布

本文链接：https://blog.csdn.net/zhumizhumi/article/details/121521618

版权

Echart 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

简介: 分行显示这个解决方法很多小伙伴都提供了博客，我写的主要目的是因为调整分行后的行间距的方法
需求: 我们项目Y轴分两行显示，每行7个字符，分行之后对行间距进行一定的设置

yAxis:{
  axisLable:{
    formatter: function(params){
      let newParamsName = ''
      let numAll = params.length//总长度
      let oneNum = 7 // 一行显示几个字符
      let rowNumber = Math.ceil(numAll/oneNum)//总行数:向上取整
      if(numAll>oneNum){
        for(let i=0;i<rowNumber;i++){
          let tempStr = ""
          let start = i*oneNum
          let end = start+oneNum
          if(i===1){
            if(end-start>=7){
              tempStr = '{a|'+params.substring(start,start+7)+'...'+'}'
            }else{
              tempStr = '{a|'+params.substring(start, end)+'}'
            }
          }
          if(i===0){
          tempStr=params.substring(start,end)+'\n'
          }
          newParamsName += tempStr
        }
      }else{
        newParamsName = params
      }
      return newParamsName
    },
    // 调整行间距
    rich:{
      a:{
        padding:[7,0,0,0]
      }
    }
  }
}