uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器

  1. 有时候布局太小,使用echarts,x轴y轴文字容易被遮挡,怎么解决这个问题呢,或者是未能铺满整个容器。

uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器_第1张图片

方法1: 直接设置 containLabel 字段

options: {

    grid: {

       containLabel: true,

    },}

 方法2:  间接设置,但是不那么准确,自适应的页面会有问题

options: {

    grid: {

         left: '1%',

         right: '1%',

         bottom: '10%'

    },}

方法3:同时调整4个方向 grid{} 与显示数值label同时配置 containLabel 


//...

eopts:{
 grid: {
              top: '8%',
              left: '-10%',
              right: '0%',
              bottom: '5%',
              containLabel: true
            },
}

问题二:当前数据值比较多位时,也会导致图表偏移。

解决:

此问题解法:

方法5:与方法4结合,再动态调整。

grid{}, containLabel ,再加动态判断数值label长度,动态调整。判断是左的数据长度了微调left的位置。增加watch观察api请求回来的数据,然后判断最左右数据值长度是多少?

  todayCount(newValue) {
      console.log(">>|------------- todayCount", this.todayCount.money7)
      if (this.todayCount.money7) {
        let len = this.todayCount.money7[1].toString().length
        console.log(`-[${this.todayCount.money7[1].toString()}]`, len)// 1
        if (len < 2) {
          this.eopts.grid.left = '-10%'
        } else if (len >= 2 && len <= 5) {
          this.eopts.grid.left = '-10%'
        } else {
          this.eopts.grid.left = '-13%'
        }
        console.log(">>|-----------eopts", this.todayCount.money7, this.eopts.grid)
      }
    }
  }

运行效果

数值为0:

uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器_第2张图片

数值长度为5位以上

uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器_第3张图片

你可能感兴趣的:(前端,javascript,html)