无法使用 eCharts 响应功能

Question

我的表格中有三个购物车，如果窗口大小发生变化，我希望自动调整大小，可以通过切换到不同尺寸的显示器或更改显示器上的浏览器大小。

根据文档和这篇文章 ： 为什么我的响应式图表选项设置不起作用

使用 addEventListener 是做到这一点的方法：

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

但是，当我更改窗口大小时，图表大小不会更改，直到刷新屏幕（MacOS 上的 Safari）

代码片段：

<td class='drilldown'> 
                <div class ='center' id='main3' style='width: 30vw; height:30vh'></div>
                <!-- Prepare a DOM with a defined width and height for ECharts -->

                    <script type='text/javascript'>
                        // Initialize the echarts instance based on the prepared dom
                        var myChart = echarts.init(document.getElementById('main3'));
                        // Auto resize chart
                        window.addEventListener('resize', function() {
                            myChart.resize();
                            });
                        // Specify the configuration items and data for the chart

                        var option = {
                        title: {
                            text: 'Horizontal Bar',
                            left: 'center',

                        },
                        tooltip: {},
                        
                        legend: {
                            orient: 'vertical',
                            right: 'center',
                            top: 'bottom',
                            data: ['Sales']
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['Q1 23', 'Q2 23', 'Q3 23', 'Q4 23', 'Q1 24', 'Q2 24']
                        },
                        series: [
                            {
                            name: 'Sales',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                            }
                        ]
                        };
                
                        // Display the chart using the configuration items and data just specified.
                        myChart.setOption(option);
                    </script>
                </td>  

Answer 1

已修复：问题是我有所有 3 个名为 myCharts 的图表。 一旦我将它们命名为 myChart1、myChart2 和 myChart3，调整大小就起作用了