Echarts:图表作为子组件监听父组件窗口的大小

实现效果：当父组件页面拖动时，echarts图表监听窗口大小 变化，在子组件中跟随父组件大小变化。

首先用Watch监听窗口大小的变化

  @Watch("visible")
  onVisibleChange(v: boolean) {
    console.log(v);
    this.resize();
  }

 绘制echarts图表函数

  drawChartBar(): void {
    const chart: PdCAny | null = this.$refs["bar"];
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(chart);
    // 指定图表的配置项和数据
    const option: PdCObject = {
      grid: {
        top: 20,
        left: 57,
        right: 24,
        bottom: 20,
        width: "auto",
        height: "auto",
        formatter: "{c}",
      },
      xAxis: {
        type: "category",
        data: this.dataX,
        //直角坐标系内绘图网格

        //坐标轴名称的样式
        axisLabel: {
          color: "rgba(192,196,206",
          fontSize: 12,
          fontFamily: "Microsoft YaHei UI",
          fontWeight: "400",
        },
        // 轴线样式
        axisLine: {
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        //不显示x坐标刻度
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        //不显示y轴线
        axisLine: {
          show: false,
        },
        //不显示y轴刻度线
        axisTick: {
          show: false,
        },
        //坐标轴名称的样式
        axisLabel: {
          color: "rgba(192,196,206",
          fontSize: 12,
          fontFamily: "Microsoft YaHei UI",
          fontWeight: "400",
        },
        //分割线样式
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            type: "dashed",
          },
        },
      },
      series: [
        {
          data: this.dataY,
          type: "bar",
          //生成柱状图颜色
          itemStyle: {
            normal: {
              color: function (params: PdCAny) {
                // build a color map as your need.
                const colorList = [ "#409EFF","#E6A23C", "#F56C6C","#67C23A","#D16CF5",];
                return colorList[params.dataIndex];
              },
            },
          },
          // 柱状图的宽度
          barWidth: 32,
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(option);
  }

监听窗口大小变化

 onResize() {
    addEvent("resize", this.resize, false);
    this.$once("hook:beforeDestroy", () => {
      removeEvent("resize", this.resize, false);
    });
  }

  resize() {
    if (this.myChart) {
      this.myChart.resize();
    } else {
      this.drawChartBar();
    }
  }

注意：要在子组件中将嵌套echarts图表的盒子设置width:100%;height:100%

 导入addEvent和removeEvent函数

import { addEvent, removeEvent } from "@/common/utils/utils";

 在utils文件中函数定义如下：

export function addEvent(type: PdCAny, handler: PdCAny, capture: PdCAny, element: PdCAny = window) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, capture);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    } else {
        element['on' + type] = handler;
    }
}

export function removeEvent(type: PdCAny, handler: PdCAny, capture: PdCAny, element: PdCAny = window) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, capture);
    } else if (element.deattachEvent) {
        element.deattachEvent('on' + type, handler);
    } else {
        element['on' + type] = null;
    }
}