13

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

所以我有：

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

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

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

4

3 回答 3

43

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

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

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

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

希望它有所帮助！

于 2015-11-18T12:18:13.557 回答
5

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

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

我希望它有帮助:)

于 2017-08-12T22:16:31.940 回答
0 
<div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div>

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

于 2021-05-28T18:57:46.837 回答