echarts 上下双坐标轴Y轴对齐

1.问题：不同的数据源用同一个布局页面来显示会导致对齐一个页面另外的页面Y轴对不齐，如下图：

图1：

图2：

结果发现图1，对齐了，图2跑偏了，可是明明是同一个布局。

后来经过观察发现，图1和图二的下半部分的y轴数量坐标位数不一样，导致了长度不同，这样的话就不行，不能够适配其他的数据。所以就必须把上下两个轴的Y轴的数量的宽度固定下来，然后让它们左对齐或右对齐，而echarts 好像没有固定这个宽度的api.

所以，就采用补空位的方法。
本例中我是预设6位数的，不够就在其左边补齐，这样就使得上下的Y轴数据的宽度一样，所以就会对齐。

代码：

 workTime(group, a, b) {
      // ["1-2Y", "1-3M", "10-12Y", "10-20d", "12-15Y", "15Y~", "2-3Y", "21-30d", "3-5Y", "3-6M", "5-8Y", "5d", "6-10d", "6-12M", "8-10Y"] 
      var aa = ["A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C"];
      // console.log(group,a,b,"dsdsdsdsdsd")
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('workRate'));
      var option1 = {
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}: {c}人',
          axisPointer: {
            type: 'shadow',
          }
        },
        legend: {
          data: [],
          top: 15,
          right: "0",
          orient: "vertical",
          center: true,
          textStyle: {
            textAlign: 'center',
            fontSize: 12
          },
          itemGap: 30,
          itemWidth: 25,
        },
        grid: [{
          show: false,
          bottom: '10%',
          left: 93,
          right: 100,
          containLabel: true,
          height: '40%'
        }, {
          show: false,
          top: '42%',
          left: 140,
          right: 100,
          height: '0%'
        }, {
          show: false,
          top: '3%',
          // left: 76,
          left: 93,
          right: 100,
          containLabel: true,
          height: '40%'
        }],
        yAxis: [{
          type: 'value',
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'left',
          axisLabel: {
            show: true,
            formatter: function (params) {
              return _this.alignment(params);
            },
            textStyle: {
              color: '#646464',
              fontSize: 12,
              // align:'left'

            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(0,162,255,0.08)",
              width: 1,
            }
          }
        }, {
          gridIndex: 1,
          show: false,
        }, {
          gridIndex: 2,
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'left',
          axisLabel: {
            show: true,
            formatter: function (params) {
              return _this.alignment(params)
            },
            textStyle: {
              color: '#646464',
              fontSize: 12,
              // align:'left'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(0,162,255,0.08)",
              width: 1,
            }
          }
        }, ],
        xAxis: [{
            type: 'category',

            position: 'bottom',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
            },
            data: [],

          }, {
            gridIndex: 1,
            type: 'category',
            position: 'center',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              align: 'center',
              textStyle: {
                color: '#323232',
                fontSize: 12
              }
            },

            data: aa,
          },
          {
            gridIndex: 2,
            type: 'category',
            position: 'top',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
            },
            data: [],
          }
        ],
        series: [{
          name: '',
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: '#49a1ff'
            }
          },
          label: {
            normal: {
              show: true,
              color: '#323232',
              position: 'top'
            }
          },
          xAxisIndex: 2,
          yAxisIndex: 2,
          data: a
        }, {
          name: '',
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: '#f9d446'
            }
          },
          label: {
            normal: {
              show: true,
              color: '#323232',
              position: 'bottom'
            }
          },

          data: b,
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option1);
    },

    // 上下坐標軸對齊
    yk: function (val) {
      return 6 - val.toString().length;
    },

    alignment: function (val) {
      let val1 = val.toString();
      if (val1 != null) {
        let len = this.yk(val1);
        return String.fromCharCode(8194).repeat(len) + val1;

      }
    },