实现效果：当父组件页面拖动时，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;}}
