vue echarts 自适应问题，相对于屏幕，相对于主体，element-resize-detector

yarn add element-resize-detector -S
//引入
 import elementResizeDetectorMaker from "element-resize-detector"

===============以下为整页复制的echarts板块自适应================
<template>
  <div>
    <div class="echa" :style="{ width: widthCha }" id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  mounted() {
    this.fn();

    //监听元素变化
    let erd = elementResizeDetectorMaker();
    let that = this;
    erd.listenTo(document.getElementById("main"), function (element) {
      that.$nextTick(function () {
        //使echarts尺寸重置
        that.myChart.resize();
      });
    });
  },
  methods: {
    fn() {
      //   监听body宽度进行echarts自适应
      window.onresize = () => {
        return (this.screenwidth = document.body.clientWidth);
      };

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("main"));
      window.onresize = this.myChart.resize;
      this.myChart.setOption({
        title: {
          show: true,
          text: "2020年服务类合同-合同金额前5公司总金额及占比情况",
          x: "center",
          y: "top",
          textAlign: "left",
        },

        series: [
          {
            name: "面积模式",
            type: "pie",
            //   radius: [20, 150],控制饼图大小
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              { value: 26, name: "rose 6" },
              { value: 22, name: "rose 7" },
              { value: 18, name: "rose 8" },
            ],
          },
        ],
      });
    },
  },
  data() {
    return {
      widthCha: "100%",
    };
  },
};
</script>

<style lang="less" scoped>
.echa {
  height: 500px;
}
</style>

主要针对于收缩对div造成的宽度影响