横向带背景柱状图

先上图：

 代码如下：（一整个就是vue页面）

<template>
  <div id="ty_l_two" style="width: 406px; height: 230px;"></div>
</template>

<script>
export default {
  props: ["xList", "xV1"],
  data() {
    return {
      xLists: [],
      xV1s: [],
    };
  },
  mounted() {
    this.myecharts();
    this.WidthAdaptive();
  },
  watch: {
    xList(e, f) {
      this.xLists = e;
      this.myecharts();
    },
    xV1(e, f) {
      this.xV1s = e;
      this.myecharts();
    },
  },
  methods: {
    WidthAdaptive(res) {
      var windth = window.screen.width;

      let fontSize = windth / 1920;
      return fontSize * res;
    },
    myecharts() {
      let myChart = this.$echarts.init(document.getElementById("ty_l_two"));
      myChart.clear();
      this.xLists = [
        "1-5年",
        "6-10年",
        "11-15年",
        "16-20年",
        "20-25年",
        "26-30年",
        "30年以上",
      ];
      this.xV1s = [7, 8, 10, 5, 15, 21, 7];
      // 渲染
      var option = {
        grid: {
          left: "18%",
          right: "5%",
          top: "8%",
          bottom: "6%",
        },
        xAxis: {
          show: false,
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
              color: "#8C9493",
            },
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: "rgba(201, 229, 255, .8)",
              fontSize: this.WidthAdaptive(12),
              padding: this.WidthAdaptive(3),
            },
          },
        },
        yAxis: {
          type: "category",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(112,112,112,0.5)",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#8C9493",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(201, 229, 255, 1)",
              fontSize: this.WidthAdaptive(12),
              padding: this.WidthAdaptive(3),
            },
          },
          axisTick: {
            show: false,
          },
          inverse: true,
          data: this.xLists,
        },
        series: [
          {
            name: "人数",
            type: "bar",
            stack: "total",
            showBackground: true, //柱状背景
            backgroundStyle: {
              //背景颜色，加透明度
              color: "rgba(180, 180, 180, 0.2)",
            },
            barWidth: this.WidthAdaptive(3),

            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 219, 255, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 219, 255, .1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [3, 3, 3, 3],
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: this.WidthAdaptive(10),
                formatter: "{c}",
                position: "right",
                textStyle: {
                  color: "rgba(201, 229, 255, 1)",
                  fontSize: this.WidthAdaptive(12),
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.xV1s,
            color: "#0EE1E8",
          },
        ],
      };
      myChart.setOption(option, true);

      window.onresize = myChart.resize;
    },
  },
};
</script>

<style scoped></style>