echarts的样式调整 / echarts柱状图不紧挨y轴开始

如图需要制作一个横向的柱状图，且起点不紧挨着零刻度线。

从元素中可以看到一个柱状图中是有两个canvas构成的，第一个canvas是横竖坐标，第二个canvas就是横向的柱状图。那么需要通过找到第二个canvas然后给它绑定样式属性。

虽然我们不知道这个元素的id，但我们知道这个元素一定是canvas标签。
所以我们可以通过document.getElementByTagName的方式去找到对应的canvas。

找到对应的canvas后就可以通过绑定，将样式重写到这个canvas里面了，在这里需要离开横轴坐标一点的话需要调整left的值。

let canvas = document.getElementsByTagName("canvas");
canvas[2].style="position:absolute;left:20px;"

注：
目前能达到效果。但这样调整以后，柱状图的数据和x轴坐标肯定不是正确对应了。或许可以通过别的调整来达到对应的关系，需要另外调整。

附上完整代码

<div class="charts2" id="charts2"></div>

charts2() {
      let charts2 = this.$echarts.init(document.getElementById("charts2"));
      var getName = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f"
      ];
      var getValue = [128, 170, 118, 159, 128, 126];

      let option = {
        grid: {
          left: "5%",
          right: "10%",
          bottom: "18%",
          top: "2%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          formatter: function(params) {
            return params[0].name + " : " + params[0].value;
          }
        },
        xAxis: {
          show: true,
          type: "value",
          name: "单位(分钟)",
          nameTextStyle: {
            color: "rgb(106,206,244)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40, 81, 110, 1)",
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "rgb(106,206,244)"
            }
          },
          splitNumber: 7
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            offset: 100,
            axisLabel: {
              show: true,
              align: "left",
              textStyle: {
                color: "rgb(106,206,244)"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(40, 81, 110, 1)",
                width: 5
              }
            },
            data: getName
          }
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            label: {
              show: true,
              position: "right",
              color: "#fff",
              fontSize: 14,
              offset: [5, 0]
            },
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(63,139,254,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(170,243,255,1)"
                  }
                ])
              }
            },
            barWidth: 10,
            data: getValue
          }
        ]
      };

      let option2 = {
        grid: {
          left: "15%",
          right: "10%",
          bottom: "18%",
          top: "2%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          formatter: function(params) {
            return params[0].name + " : " + params[0].value;
          }
        },
        xAxis: {
          show: true,
          type: "value",
          name: "单位(分钟)",
          nameTextStyle: {
            color: "rgb(106,206,244)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40, 81, 110, 1)",
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "rgb(106,206,244)"
            }
          },
          splitNumber: 7
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            offset: 100,
            axisLabel: {
              show: true,
              align: "left",
              textStyle: {
                color: "rgb(106,206,244)"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(40, 81, 110, 1)",
                width: 5
              }
            },
            data: getName
          }
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            label: {
              show: true,
              position: "right",
              color: "#fff",
              fontSize: 14,
              offset: [5, 0]
            },
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(63,139,254,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(170,243,255,1)"
                  }
                ])
              }
            },
            barWidth: 10,
            data: getValue
          }
        ]
      };
      charts2.setOption(option);
      window.addEventListener("resize", function() {
        charts2.resize();
      });
      let canvas = document.getElementsByTagName("canvas");
      canvas[2].style="position:absolute;left:20px;"
    }