Echarts 和 bootstrap：响应式宽度

Posted 2023-03-06

【中文标题】Echarts 和 bootstrap：响应式宽度

【英文标题】：Echarts and bootstrap: responsive width

【发布时间】：2016-01-31 23:57:12

【问题描述】：

使用 Echarts（来自百度）我想在 div 元素中放置一个饼图（我正在使用引导程序）。

所以我有：

<div class="row">
   <div class="col-md-4">
      <div id="chartGift" style="height:400px;"></div>
    </div>
</div>

我从官方文档中获取了 javascript 代码 https://ecomfe.github.io/echarts/doc/example/pie1.html#-en

问题是饼图没有出现，因为检查 html 代码，我看到宽度为 0。为什么 echarts 不设置父元素的宽度？我不想设置静态宽度（我看到它有效），因为图表没有响应。

【参考方案1】：

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

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

它对我有用！ 另外，如果您想确保图表响应，您可以知道窗口何时调整大小并强制图表调整大小。像这样：

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

希望对您有所帮助！

【讨论】：

这是一个很好的答案。关键是要有width: 100%，否则resize() 不起作用。文档也没有提到这一点，但我想这只是常识:)

但是，如果我的父 div 是 Material-ui 卡，它就不起作用:(

【参考方案2】：

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

这对我有用。 A min-width: 100% 就可以了。

【参考方案3】：

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

    $(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);

    );

图表容器的样式为：style="height: 400px; width: 100%; 这很重要，当您使用echart工具箱时。它喜欢走出容器。

希望对你有帮助:)