vue中使用echarts，当窗口大小发生变化时，重新渲染图表

 //监听window的onresize事件，当窗口大小发生改变，那么就resize图表

    window.onresize = () => {

      this.echartsDelayedChart.resize();

    };

this.$nextTick(function () {

        this.echartsDelayedChart = Echarts.init(

          document.getElementById("echartsDelayed")

        );

        let option = {

          tooltip: {

            trigger: "axis",

          },

          grid: {

            left: 50,

            right: 10,

            top: 50,

            bottom: 20,

          },

          legend: {

            top: 0,

            right: 20,

            icon: "roundRect", //  这个字段控制形状  类型包括： roundRect circle，rect ，roundRect，triangle，diamond，pin，arrow，none

            itemWidth: 20, // 设置宽度

            itemHeight: 10, // 设置高度

            itemGap: 40, // 设置间距

            textStyle: {

              fontSize: 13,

              color: "#00b9e8",

            },

            data: ["视频时延", "关键帧时延", "信令时延"],

          },

          xAxis: {

            type: "category",

            axisTick: {

              show: false, //隐藏x坐标轴刻度

            },

            //x轴颜色

            axisLine: {

              show: true,

              lineStyle: {

                color: "#00b9e8", //x轴下线

              },

            },

            splitLine: {

              show: false,

            },

            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],

          },

          yAxis: {

            type: "value",

            axisLine: {

              lineStyle: {

                color: "#00b9e8", //左侧y轴颜色

              },

            },

            splitLine: {

              show: false,

            },

            //y轴字体样式

            axisLabel: {

              // formatter: '{value} ml'

              show: true,

              textStyle: {

                color: "#00b9e8",

                fontSize: "12",

              },

            },

          },

          series: [

            {

              name: "视频时延",

              data: [820, 932, 901, 934, 1290, 1330, 1320],

              type: "line",

              showBackground: true,

              z: 10,

              // 设置折线上圆点大小

              symbolSize: 6,

            },

            {

              name: "关键帧时延",

              data: [123, 932, 444, 222, 666, 677, 1456],

              type: "line",

              z: 10,

              // 设置折线上圆点大小

              symbolSize: 6,

            },

            {

              name: "信令时延",

              data: [820, 932, 234, 112, 666, 776, 1234],

              type: "line",

              z: 10,

              // 设置折线上圆点大小

              symbolSize: 6,

            },

          ],

        };

        this.echartsDelayedChart.setOption(option);