横向堆叠柱状图

<template>
  <div id="zjy_l_three" style="width: 406px; height: 410px;"></div>
</template>

<script>
export default {
  props: ["echartsData"],
  data() {
    return {
      pieData: [],
    };
  },
  mounted() {
    this.myecharts();
    this.WidthAdaptive();
  },
  watch: {
    echartsData(n, o) {
      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("zjy_l_three"));
      myChart.clear();

      // 渲染
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          icon: "rect",
          itemWidth: this.WidthAdaptive(14),
          itemHeight: this.WidthAdaptive(4),
          itemGap: this.WidthAdaptive(34),
          padding: this.WidthAdaptive(2),
          top: this.WidthAdaptive(28),
          textStyle: {
            color: "rgba(201, 229, 255, 1)",
            fontSize: this.WidthAdaptive(12),
          },
        },
        grid: {
          left: "18%",
          right: "18%",
          top: "14%",
          bottom: "12%",
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#8C9493",
            },
          },
          axisLabel: {
            show: true,
            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, .8)",
              fontSize: this.WidthAdaptive(12),
              padding: this.WidthAdaptive(3),
            },
          },
          axisTick: {
            show: false,
          },
          inverse: true,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        series: [
          {
            name: "入驻",
            type: "bar",
            stack: "total",
            showBackground: true, //柱状背景
            backgroundStyle: {
              //背景颜色，加透明度
              color: "rgba(180, 180, 180, 0.2)",
            },
            barWidth: this.WidthAdaptive(7),
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [2, 2, 2, 2],
              },
            },
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: [32, 80, 30, 33, 89, 33, 32, 20, 30, 93, 39, 43],
            color: "#0EE1E8",
          },
          {
            name: "空置",
            type: "bar",
            stack: "total",
            showBackground: true, //柱状背景
            backgroundStyle: {
              //背景颜色，加透明度
              color: "rgba(180, 180, 180, 0.2)",
            },
            barWidth: this.WidthAdaptive(7),
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [2, 2, 2, 2],
              },
            },
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: [42, 30, 30, 33, 39, 73, 32, 30, 30, 33, 39, 13],
            color: "#FFAD0E",
          },
          {
            name: "正在孵化",
            type: "bar",
            stack: "total",
            showBackground: true, //柱状背景
            backgroundStyle: {
              //背景颜色，加透明度
              color: "rgba(180, 180, 180, 0.2)",
            },
            barWidth: this.WidthAdaptive(7),
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [2, 2, 2, 2],
              },
            },
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: [32, 10, 30, 23, 39, 31, 32, 50, 30, 33, 39, 33],
            color: "#2BB5FF",
          },
        ],
      };
      myChart.setOption(option, true);

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

<style scoped></style>