Echarts屏幕尺寸改变如果数据是函数计算出来的实现动态改变

// 初始化echarts
function initChart(myData8, tss, dcl) {
    const chartDom = document.getElementById('echarts2');
    let chart = proxy.$echarts.init(chartDom);
    // let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];

    // 保存原始选项对象
    let option = createOption();
    chart.setOption(option);

    function createOption() {
        // 创建并返回一个新的option对象，其中包含所有使用$fitChartSize计算的值
        return {
            title: {
                text: '能耗设备',
                textStyle: {
                    fontSize: proxy.$fitChartSize(14),  // 设置文字大小
                    color: '#fff'   // 设置文字颜色
                },
            },
            // backgroundColor: "#041D3F",
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(0, 255, 233,0)",
                                },
                                {
                                    offset: 0.5,
                                    color: "rgba(255, 255, 255,1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0, 255, 233,0)",
                                },
                            ],
                            global: false,
                        },
                    },
                },
                textStyle: {
                    color: "#fff",
                    fontSize: proxy.$fitChartSize(14), // 设置字体大小
                },
                confine: true, // 限制溢出屏幕外
                backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色
                padding: [10, 10, 10, 10], // 设置方框的内边距
            },
            // grid: computedSize.value.grid,
            grid: {
                containLabel: true,
                bottom: proxy.$fitChartSize(0),
                top: proxy.$fitChartSize(55),
                left: proxy.$fitChartSize(5),
                right: proxy.$fitChartSize(5),
            },
            legend: {
                show: true,
                right: 0,
                top: 0,
                // itemWidth: computedSize.value.itemWidth,
                itemWidth: proxy.$fitChartSize(22),
                // itemHeight: computedSize.value.itemHeight,
                itemHeight: proxy.$fitChartSize(12),
                icon: 'rect',
                // itemGap: 20, // 调整图例项之间的水平间距
                textStyle: {
                    color: '#fff',
                    fontSize: proxy.$fitChartSize(14),
                    // 设置上下居中对齐
                    align: 'center',
                    // verticalAlign: 'middle',
                    // color: "#B6DCF5",
                    // padding: [0, 0, 0, 4],
                },
            },
            xAxis: {
                data: myData8,
                axisLabel: {
                    interval: 0,
                    show: true,
                    fontSize: proxy.$fitChartSize(14),
                    color: "#B6DCF5",
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        show: true,
                        color: "rgba(54, 153, 255, .4)",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: [
                {
                    name: "单位：KJ",
                    type: "value",
                    // nameGap: computedSize.value.nameGap,
                    nameGap: proxy.$fitChartSize(15),
                    nameTextStyle: {
                        color: "#B6DCF5",
                        fontSize: proxy.$fitChartSize(14),
                        align: "center",
                        padding: [0, 0, 0, 0],
                        // padding: [0, 0, 0, proxy.$fitChartSize(50)],
                    },
                    // splitNumber: 5,
                    axisLabel: {
                        show: true,
                        fontSize: proxy.$fitChartSize(14),
                        color: "#B6DCF5",
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#7FD6FF",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(54, 153, 255, .4)",
                            type: "dashed",
                        },
                    },
                }, {
                    name: "单位：吨",
                    // offset: -25,
                    type: "value",
                    // nameGap: computedSize.value.nameGap, // 控制名称和轴之间的距离
                    nameGap: proxy.$fitChartSize(15), // 控制名称和轴之间的距离
                    nameLocation: "end",
                    nameTextStyle: {
                        color: "#B6DCF5",
                        fontSize: proxy.$fitChartSize(14),
                        align: "center",
                        // padding: [0, 0, 0, 0],
                        // padding: computedSize.value.padding,
                        padding: [0, proxy.$fitChartSize(50), 0, 0],
                        // padding: computedSize.value.padding,
                    },
                    // splitNumber: 5,
                    axisLabel: {
                        show: true,
                        fontSize: proxy.$fitChartSize(14),
                        color: "#B6DCF5",
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#7FD6FF",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(54, 153, 255, .4)",
                            type: "dashed",
                        },
                    },
                }
            ],
            series: [
                {
                    name: "能耗",
                    type: "line",
                    showSymbol: true,
                    symbolSize: proxy.$fitChartSize(6),  //节点圆点大小
                    symbol: "circle",
                    lineStyle: {
                        normal: {
                            color: "#FF8E3C",
                            // width: computedSize.value.borderWidth, //线条宽度
                            width: proxy.$fitChartSize(2), //线条宽度
                        },
                    },
                    itemStyle: {
                        color: "#FF8E3C",
                        // borderColor: "#fff",
                        borderWidth: 2,
                    },
                    data: tss, // 折线图的数据
                },
                {
                    name: "吞吐量",
                    type: "line",
                    showSymbol: true,
                    symbol: "circle",
                    symbolSize: proxy.$fitChartSize(6), //节点圆点大小
                    lineStyle: {
                        normal: {
                            color: "#00A0E9",
                            // width: computedSize.value.borderWidth, //线条宽度
                            width: proxy.$fitChartSize(2), //线条宽度
                        },
                    },
                    itemStyle: {
                        color: "#00A0E9",
                        // borderColor: "#fff",
                        // borderWidth: 2,
                        borderWidth: proxy.$fitChartSize(3),
                    },
                    data: dcl, // 折线图的数据
                },
                // {
                //     name: "已处理",
                //     type: "line",
                //     showSymbol: true,
                //     symbolSize: 8,
                //     symbol: "circle",
                //     lineStyle: {
                //         normal: {
                //             color: "#02D6B0",
                //         },
                //     },
                //     itemStyle: {
                //         color: "#02D6B0",
                //         borderColor: "#fff",
                //         borderWidth: 2,
                //     },
                //     data: ycl, // 折线图的数据
                // },
            ],
        };
    }

    // 调整图表大小，并更新所有尺寸相关的配置
    function updateChartOnResize() {
        // 重新创建option对象，这样会基于新的窗口大小重新计算尺寸
        let newOption = createOption();
        // 更新图表选项
        chart.setOption(newOption, true); // 第二个参数为true表示不保留动画
        // 调整图表大小
        chart.resize();
    }



    // 使用刚指定的配置项和数据显示图表。
    // chart.setOption(option);

    // 轮播核心
    handleChartLoop(option, chart);

    // let index = 0; // 初始化索引 

    // // 使用定时器定时更新 tooltip 数据
    // if (timer.value) clearInterval(timer.value);

    // timer.value = setInterval(() => {
    //     chart.dispatchAction({
    //         type: "showTip", // 触发 tooltip 显示
    //         seriesIndex: 0, // 触发 tooltip 的系列索引
    //         dataIndex: index, // 触发 tooltip 的数据索引
    //     });
    //     index = (index + 1) % myData8.length; // 更新索引，循环显示数据
    // }, 2000); // 每隔 2 秒更新一次 

    // // 鼠标移入暂停轮播
    // chart.on("mousemove", () => {
    //     console.log("清空")
    //     if (timer.value) clearInterval(timer.value);
    //     timer.value = null;
    // });

    // // 鼠标移出继续轮播
    // chart.on("globalout", () => {
    //     if (timer.value) clearInterval(timer.value);
    //     timer.value = setInterval(() => {
    //         chart.dispatchAction({
    //             type: "showTip", // 触发 tooltip 显示
    //             seriesIndex: 0, // 触发 tooltip 的系列索引
    //             dataIndex: index, // 触发 tooltip 的数据索引
    //         });
    //         index = (index + 1) % myData8.length; // 更新索引，循环显示数据
    //     }, 2000); // 每隔 2 秒更新一次
    // });

    // window.addEventListener('resize', function () {
    //     chart.resize();
    // });

    // 添加窗口大小改变监听器
    window.addEventListener('resize', updateChartOnResize);

    // 清理函数，移除事件监听器（如果需要）
    // return function cleanup() {
    //     window.removeEventListener('resize', updateChartOnResize);
    // };

}

function handleChartLoop(option, myChart) {
    if (!myChart) {
        return;
    }
    let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
    timeTicket.value = setInterval(selectPie, 2000); // 设置自动切换高亮图形的定时器

    // 取消所有高亮并高亮当前图形
    function highlightPie() {
        // 遍历饼图数据，取消所有图形的高亮效果
        for (var idx in option.series[0].data) {
            myChart.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: idx,
            });
        }
        // 高亮当前图形
        myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: currentIndex
        })
    }

    // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
    myChart.on("mouseover", (params) => {
        clearInterval(timeTicket.value);
        currentIndex = params.dataIndex;
        highlightPie();
    });

    // 用户鼠标移出时，重新开始自动切换
    myChart.on("mouseout", (params) => {
        if (timeTicket.value) {
            clearInterval(timeTicket.value);
        }
        timeTicket.value = setInterval(selectPie, 2000);
    });

    // 高亮效果切换到下一个图形
    function selectPie() {
        var dataLen = option.series[0].data.length;
        currentIndex = (currentIndex + 1) % dataLen;
        highlightPie();
    }
}