vue-echarts 柱状图Y轴Name因为数据过小导致显示不全的问题& legend（图例）和Y轴文字自适应对齐

项目场景：

导致这个问题产生的原因是，当数据过小时，Y轴的宽度过小，导致Y轴的name无法全部显示。

解决这个问题的方法也比较多：

1.把Y轴的宽度加大

2.设置Y轴的最小值

3.加大Y轴与图表的margin

上述三个方法都能在echart的官网找到对应的API,所以在这里就不多赘述

我使用的方法是使用echart中的graphic来自定义name，对比上述的其他方法，优势就是不用改变echart图表的样式，保持页面较为美观

//使用的是基于简单封装过的echart文件，因为
//在setOption，初始化绘制图表时，接收外部传入的option。基于这个option来自定义name

this.myChart.setOption(this.setgraphic(option)) 


setgraphic(obj){
     obj.graphic = [] //自定义右侧Name
      // Y轴name左对齐
      if (Array.isArray(obj.yAxis)) {
        // 处理只有一个Y轴时，图例右对齐
        obj.yAxis.forEach((res, index) => {
          let graphicObj = {
            type: 'text',
             //graphicTop为自定义参数,为graphic在图表中的高度，根据自己的需要进行定义，可不传
            top: res.graphicTop?res.graphicTop:'8%',
            style: {
              text: res.name,
              fontSize: 14,
              fill:'#666666'
            },
          }
            //Y轴有两个的适配
          if(index==0){
            graphicObj.left = 0
          }else{
            graphicObj.right = 0
          }
          obj.graphic.push(graphicObj)
           res.nameTextStyle =  {
           color: 'transparent'  // y 轴标签颜色为透明，不清空是因为防止再次渲染时改变了配置项
          }
        })
      }
    return obj
}

得出得效果为 

第二，如果Y轴有两个name，且显示legend的时候往往会出现一个问题

legend与Y轴name对齐的问题，项目中echart的数量少还好说，可以用legend 的 style来用像素进行定位对齐，但是数量多的时候就只能另辟蹊径了，也是用了一个取巧的方法，我们来改造一下上面的方法

//使用的是基于简单封装过的echart文件，因为
//在setOption，初始化绘制图表时，接收外部传入的option。基于这个option来自定义name

this.myChart.setOption(this.setgraphic(option)) 


setgraphic(obj){
     obj.graphic = [] //自定义右侧Name
      // Y轴name左对齐
      if (Array.isArray(obj.yAxis)) {
         // 处理只有一个Y轴时，图例右对齐
        if(obj.yAxis.length == 1){
          this.setLegendOption(obj)
        }
        obj.yAxis.forEach((res, index) => {
          let graphicObj = {
            type: 'text',
             //graphicTop为自定义参数,为graphic在图表中的高度，根据自己的需要进行定义，可不传
            top: res.graphicTop?res.graphicTop:'8%',
            style: {
              text: res.name,
              fontSize: 14,
              fill:'#666666'
            },
          }
            //Y轴有两个的适配
          if(index==0){
            graphicObj.left = 0
          }else{
            graphicObj.right = 0
          }
          obj.graphic.push(graphicObj)
           res.nameTextStyle =  {
           color: 'transparent'  // y 轴标签颜色为透明，不清空是因为防止再次渲染时改变了配置项
          }

         // 如果第二条Y轴Name为空的时候，也需将图例向右对齐
            if(index ==1&&!res.name){
                this.setLegendOption(obj)
            }else{
              // 如果第二条Y轴有Name的话，图例和Name对齐
                this.setLegendOption(obj,res.graphicTop?res.graphicTop:'8%','top')
                this.setLegendOption(obj,[0 , 20],'padding')
                // 按照Name的长度来决定图例右边距
                this.getGraphicWidth(res.name,obj)
            }
        })
      }
     return obj
}


     // 设置Legend参数
    setLegendOption(obj,num = 0,direction="right"){
      obj.legend[direction] = num
    },
    // 获取graphic的宽度
    getGraphicWidth(name,obj){
     //这里用了一个取巧的方法，取了name的长度来判断graphic的宽度，使得graphic与Legend保持20px        
     //的距离
     this.setLegendOption(obj,(name.length*14)+'px','right')
    },

然后就能得到一个比较好的对齐效果