echarts图表的div高度跟随数据长度自适应

// 排名折线图
<template>
  <div id="charts">
    <div
      id="cate"
      ref="cate"
      style="width:5rem;margin-top:.2rem;"
    ></div>
<!-- height:9.2rem; -->
    <!-- 数据说明 -->
    <div class="dv">
      <span>备注：本次排名更新于 {{ date }} 23:59:59</span>
    </div>
  </div>
</template>

<script>

export default {
  props: ["warnData", "rateObj02","color", "name", "picData", "picnData"],
  data() {
    return {
      data:[],
      date: "2020-12-12",
      // data: [45, 50, 65, 75, 80, 100],
    };
  },
  watch: {
    //监听数据变化
    // 传值无法正常监听，先在父组件中添加好对应的静态数据，再通过请求更新数据即可
    rateObj02: {
      handler(newVal, oldVal) {
        console.log(newVal,oldVal,'watch')
        if(newVal){
          this.setCate(newVal);
        }else{
          this.setCate(oldVal);
        }
      },
      deep: true,
        // immediate: true
    },
  },
  mounted() {
    // this.setCate(this.comName,this.yearRank);
    // this.setCate(this.warnData, this.color);
    this.time();
  },
  methods: {
    time(){
      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
      var yesday = new Date(time); // 获取的是前一天日期
      yesday = yesday.getFullYear() + "-" + (yesday.getMonth()> 9 ? (yesday.getMonth() + 1) : "0" + (yesday.getMonth() + 1)) + "-" +(yesday.getDate()> 9 ? (yesday.getDate()) : "0" + (yesday.getDate())); //字符串拼接转格式：例如2018-08-19
      this.date = yesday;
    },
    // init(){
    //   // 基于准备好的dom，初始化echarts实例
    //   this.cate = this.$echarts.init(this.$refs.cate);
    //   // 绘制图表，echarts_option数据
    //   this.cate.setOption(option);
    // },
    setCate(data, color) {
      // 基于准备好的dom，初始化echarts实例
      this.cate = this.$echarts.init(this.$refs.cate);
      var option = {
        textStyle: {
          // fontSize: arr.initHeight,
          color: "#B2C8FF", //字体颜色
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            // fontSize: arr.initHeight,
            color: "black", //字体颜色
          },
          //   formatter: function (params) {
          //      return params[0].name + ': ' + params[0].value+"%";
          //   },
        },
        yAxis: {
          data:data.comName,
          // ["青岛分公司","青岛分公司","青岛分公司","青岛分公司","青岛分公司", "杨浦分公司", "广州分公司", "杭州分公司", "苏州分公司", "郑州分公司"],
          axisTick: {
            //x轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //坐标轴线
            show: false,
          },
        },
        xAxis: {
          show: false,
          max: 100,
          min: 0,
        },
        grid: {
          left: "0%",
          right: "14%",
          bottom: "16%",
          // top:"300%",
          containLabel: true,
        },
        tooltip: {
          // 悬停指示
          trigger: "item",
          formatter: "{b}: {c}%",
        },
        series: [
          {
            name: "收缴率",
            type: "bar",
            stack: "使用情况",
            data: data.yearRank,
            // [50,60,70,80,81, 82, 82, 88, 92, 100],
            barWidth: 10, //柱图宽度
            itemStyle: {
              barBorderRadius: [50, 50, 50, 50], // 统一设置四个角的圆角大小
            },

            //标签
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}%", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              },
            },
            itemStyle: {
              barBorderRadius: [50, 0, 0, 50], // 统一设置四个角的圆角大小
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#0A72FF",
                    "#0A72FF",
                    "#0A72FF",
                    "#0A72FF",
                    "#0A72FF",
                    "#0A72FF",
                    "#0A72FF",
                    "#D17C42",
                    "#EEF7FE",
                    "#FFDB5D",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            markPoint: {
              symbol: "pin", //标记类型
              symbolSize: 10, //图形大小
              itemStyle: {
                normal: {
                  borderColor: "green",
                  borderWidth: 1, // 标注边线线宽，单位px，默认为1
                  label: {
                    show: true,
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "",
            type: "bar",
            stack: "使用情况",
            // data: [45,50,65,75,80,100],//设置数值下的阴影
            itemStyle: {
              barBorderRadius: [0, 50, 50, 0], // 统一设置四个角的圆角大小
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  //var colorList = ['#00F4FF', '#0092FF', '#0061FE', '#002099', '#000682'];
                  var colorList = [
                    "rgba(255,0,0,.1)",
                    "rgba(255,0,0,.1)",
                    "rgba(255,0,0,.1)",
                    "rgba(255,0,0,.1)",
                    "rgba(255,0,0,.1)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      // 绘制图表，echarts_option数据
      this.cate.setOption(option);

      //柱状图y轴的长度 option.yAxis.data.length
      var autoHeight = option.yAxis.data.length * 50 + 100;
      //获取 ECharts 实例容器的 dom 节点。
      this.cate.getDom().style.height = autoHeight + "px";
      this.cate.getDom().childNodes[0].style.height = autoHeight + "px";
      this.cate.getDom().childNodes[0].childNodes[0].setAttribute("height", autoHeight);
      this.cate.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
      //根据窗口的大小变动图表
      this.cate.resize();
    },
  },

};
</script>

<style lang="less" scoped>
#charts {
  width: 5.2rem;
  height: 9.2rem;
  .dv {
    position: absolute;
    left: 5%;
    top: 88%;
    span {
      font-size: 0.2rem;
      font-weight: 400;
      color: #b2c8ff;
    }
  }
}
</style>

关键代码

//柱状图y轴的长度 option.yAxis.data.length
var autoHeight = option.yAxis.data.length * 50 + 100;
//获取 ECharts 实例容器的 dom 节点。
this.cate.getDom().style.height = autoHeight + "px";
this.cate.getDom().childNodes[0].style.height = autoHeight + "px";
this.cate.getDom().childNodes[0].childNodes[0].setAttribute("height", autoHeight);
this.cate.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
//根据窗口的大小变动图表
this.cate.resize();