Question

使用Echarts（来自百度）我想在div元素中放一个饼图（我使用bootstrap）。

所以我有：

<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不设置父元素的宽度？我不想要设置静态宽度（我发现它有效），因为图表没有响应。

Answer 1

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

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

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

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

希望它有所帮助！

Answer 2

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

    $(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工具箱时。它喜欢走出容器。

我希望它有所帮助：）

Answer 3

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

这对我有用。 min-width: 100% 可以解决问题。

Echarts和bootstrap：响应宽度

3 个答案: