如果你只想设置一个固定的高度，请尝试将宽度设置为容器的100%，并设置一个最小高度：

<div id="chartGift" style="width: 100%; min-height: 400px"></div>

它对我很有效！另外，如果你想确保图表是响应性的，你可以知道窗口的大小是什么时候调整的，并强制图表也调整大小。像这样：

$(window).on('resize', function(){
        if(chart != null && chart != undefined){
            chart.resize();
        }
    });

希望它有帮助！

我在购买的管理模板中找到了解决方案。有一个解决方案是在加载内容后初始化图表。下面是工作示例：

$(document).ready(function () {

        setTimeout(function () {

            // based on prepared DOM, initialize echarts instance
            var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons');
            // specify chart configuration item and data
            var option = {..options of chart here ..}

            // use configuration item and data specified to show chart
            myChart.setOption(option);

        }, 100);

    });

图表容器的样式为：高度：400 px;宽度：100%;这很重要，当你在使用echart工具箱的时候。它喜欢走出容器。
我希望它能有所帮助：）

只需使用ResizeObserver来检测图表容器元素大小的变化。即使布局发生变化，它也能工作，并且不依赖于窗口大小等。顺便说一句，如果需要，Polyfill也可用。

const container = document.querySelector('#chart');
const chart = echarts.init(container);

new ResizeObserver(() => chart.resize()).observe(container);

<div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div>

这对我很有效。最小宽度：100%的效果。

设置width: 100%会导致echarts以节点大小（100px）出现，而设置min-width: 100%则根本不会出现。所以这是相对css单位的问题。
但是我们仍然可以使用JS设置图表容器的大小。

let main = document.querySelector("main");
let chartDom = document.getElementById("echartsGrafikon");

// getting width of element we want to size up to our chart
// do this before chart initialization
let grafikonWidth = main.getBoundingClientRect().width;
chartDom.style.width = grafikonWidth + "px";

// initializing echart
let echartGrafikon = echarts.init(chartDom);

// to dynamically change size         
window.onresize = function () {
    echartGrafikon.resize();
};