javascript - Responsiveness textContent (graphic) - Stack Overflow

I'm trying to adjust the textContent.width property so that it responds as follows:

When the screen size increases (CTRL +) the overflow: truncate and ellipsis: “...” appear gradually so as not to leave the element (vBox). And when it's the other way around (CTRL -), the text appears normally inside vBox. In other words, the text must always adapt to the screen resize.

In other words, the textContent must match the size of the vBox in both cases. I managed to make the vBox responsive, but I need to adjust the text inside it as well.

document.addEventListener("DOMContentLoaded", () => {
    // rounded rectangle
    const valueBox = echarts.graphic.extendShape({
        type: "vBox",
        shape: {
            r: 5
        },
        style: {
            lineWidth: .5,
            stroke: "#000",
            lineDash: 'solid',
            shadowBlur: 7.5,
            shadowColor: '#000', 
            shadowOffsetX: 3,
            shadowOffsetY: 3
        },
        buildPath: (ctx, shape) => {
            echarts.graphic.Rect.prototype.buildPath.call(this, ctx, shape);
        }
    });

    // register shape
    echarts.graphic.registerShape("vBox", valueBox);

    // init
    const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

    // dimensions
    const dimensionsInit = [chartUse.getWidth(), chartUse.getHeight()];

    window.addEventListener("resize", () => {
        // plot resize
        chartUse.resize();
        // graphic resize
        const dimensionsResize = [chartUse.getWidth(), chartUse.getHeight()];
        chartUse.setOption({
            graphic: [
                {
                    children: [
                        {
                            shape: {
                                x: (dimensionsResize[0] - dimensionsResize[0] / 5) / 2, // Centraliza horizontalmente
                                y: (dimensionsResize[1] - dimensionsResize[1] / 5) / 2, // Centraliza verticalmente
                                width: dimensionsResize[0] / 5,
                                height: dimensionsResize[1] / 5
                            },
                            textContent: {
                                width: dimensionsResize[0],
                                overflow: 'truncate',
                                ellipsis: '...',
                                align: "center",
                                style: {
                                    rich: {
                                        text: {
                                            lineHeight: dimensionsResize[1] / 28,
                                            fill: '#000',
                                            fontSize: dimensionsResize[0] / 70
                                        }
                                    }
                                }
                            },
                            textConfig: {
                                position: 'inside'
                            }
                        }
                    ] 
                }
            ]
        });
    });

    function chartFrameSwitch0 () {

        const gradColor1 = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            { offset: .5, color: "#fafac0" },
            { offset: 1, color: "#008cba" }
        ])

        const graphic0 = [
            {
                type: "group",
                children: [
                    {
                        type: 'vBox',
                        shape: {
                            x: (dimensionsInit[0] - dimensionsInit[0] / 5) / 2, // Centraliza horizontalmente
                            y: (dimensionsInit[1] - dimensionsInit[1] / 5) / 2, // Centraliza verticalmente
                            width: dimensionsInit[0] / 5,
                            height: dimensionsInit[1] / 5
                        },
                        style: {
                            fill: gradColor1,
                            lineCap: "x",
                            lineWidth: 2,
                            stroke: '#000'
                        },
                        textContent: {
                            style: {
                                text: "{text|Overflowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww\n50%}",
                                width: ( (dimensionsInit[0] / 10) - (dimensionsInit[0] / 10) * .15 ),
                                overflow: 'truncate',
                                ellipsis: '...',
                                stroke: '#fff',
                                align: "center",
                                rich: {
                                    text: {
                                        lineHeight: dimensionsInit[1] / 28,
                                        fill: '#000',
                                        fontSize: dimensionsInit[0] / 70
                                    }
                                }
                            }
                        },
                        textConfig: {
                            position: "inside"
                        }
                    }
                ]
            }
        ];

        const option = {
            graphic: graphic0
        };

        chartUse.setOption(option);

    }

    chartFrameSwitch0();

});

<head>
    <script src="/[email protected]/dist/echarts.min.js"></script>
    <title>Custom Shape Example</title>
</head>

<div class="chart" style="width: 100%; height: 100vh;"></div>