乐趣区

关于javascript:echarts-折线图移动端X轴显示不全

jiezi

次要起因

X 轴文字太多, 须要文字歪斜角度, 换行以及省略

X 轴文字歪斜角度, 换行

interval

坐标轴刻度标签的显示距离 (在类目轴中无效哦)，默认会采纳标签不重叠的形式显示标签（也就是默认会将局部文字显示不全）能够设置为 0 强制显示所有标签，如果设置为 1，示意隔一个标签显示一个标签，如果为 3，示意隔 3 个标签显示一个标签，以此类推

rotate

标签歪斜的角度，在类目轴的类指标签显示不全时能够通过旋转避免标签重叠（官网这样说的）旋转的角度是 -90 到 90 度 

xAxis:{
  axisLabel:{
    interval: 0,// X 轴信息全副展现
    rotate: -60,//60 标签歪斜的角度
  }
}

仍旧受到遮挡

这个名称 x 轴的文字如果太长会受到遮挡，还是显示不全，这个时候能够用 grid 属性解决 

grid: {
  left: '10%',
  bottom:'35%'
},

需要 (中文显示两行, 文字过多显示省略号; 长日期显示一行, 过多显示省略号)

formatter

axisLabel 中应用 formatter 回调，formatter 有两个参数，应用办法是这样的 formatter:function(value,index){}，value 是类目（测试医院 A，人民医院）,index 是类目索引。

xAxis:{
  axisLabel:{formatter:function(value){
        let ret = ""; // 拼接加 \n 返回的类目项
        let maxLength = 8; // 每项显示文字个数
        if(value.length>2*maxLength){value = value.substring(0, 2*maxLength - 3) + "...";
        }
        let valLength = value.length; // X 轴类目项的文字个数
        let rowN = Math.ceil(valLength / maxLength); // 类目项须要换行的行数
        if(/.*[/u4e00-/u9fa5]+.*$/.test(value)){// 判断是否有中文
          if(rowN > 1){for (let i = 0; i < rowN; i++) {
                let temp = "";// 每次截取的字符串
                let start = i * maxLength;// 开始截取的地位
                let end = start + maxLength;// 完结截取的地位
                // 这里也能够加一个是否是最初一行的判断，然而不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; // 凭借最终的字符串
            }
            return ret
          }else{return value}
        }else{return value}
     }
  }
}

总结

整体代码 

op1:{
  grid: {
    left: '10%',
    bottom:'35%'
  },
  xAxis:{
    axisLabel:{
       textStyle:{
          color: "#444",
          fontSize: 8,
          lineHeight: 9
       },
       formatter:function(value){
          let ret = ""; // 拼接加 \n 返回的类目项
          let maxLength = 8; // 每项显示文字个数
          if(value.length>2*maxLength){value = value.substring(0, 2*maxLength - 3) + "...";
          }
          let valLength = value.length; // X 轴类目项的文字个数
          let rowN = Math.ceil(valLength / maxLength); // 类目项须要换行的行数
          if(/.*[/u4e00-/u9fa5]+.*$/.test(value)){// 判断是否有中文
            if(rowN > 1){for (let i = 0; i < rowN; i++) {
                  let temp = "";// 每次截取的字符串
                  let start = i * maxLength;// 开始截取的地位
                  let end = start + maxLength;// 完结截取的地位
                  // 这里也能够加一个是否是最初一行的判断，然而不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; // 凭借最终的字符串
              }
              return ret
            }else{return value}
          }else{return value}
       }
    },
    interval: 0,// X 轴信息全副展现
    rotate: -60,//60 标签歪斜的角度
  }
}

echarts 折线图 (挪动端)X 轴显示不全 X%E8%BD%B4%E6%98%BE%E7%A4%BA%E4%B8%8D%E5%85%A8.md)

退出移动版