Javascript Echarts 和 bootstrap：响应式宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33454946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Echarts and bootstrap: responsive width
提问by Tom
With Echarts (from Baidu) i want put a pie chart inside a div element (i'm using bootstrap).
使用 Echarts（来自百度），我想在 div 元素中放置一个饼图（我正在使用引导程序）。
So i have:
所以我有：
<div class="row">
<div class="col-md-4">
<div id="chartGift" style="height:400px;"></div>
</div>
</div>
I've take the javascript code from the official documentation https://ecomfe.github.io/echarts/doc/example/pie1.html#-en
我从官方文档https://ecomfe.github.io/echarts/doc/example/pie1.html#-en 中获取了 javascript 代码
The problem is that the pie doesn't appear because, inspecting the html code, i see that the width is 0. Why echarts doesn't set the width from the parent element? I don't want set static width (i see that it works) because the chart isn't responsive.
问题是饼图没有出现，因为检查html代码，我看到宽度是0。为什么echarts没有从父元素设置宽度？我不想设置静态宽度（我看到它有效），因为图表没有响应。
回答by ana.arede
If you just want to set a fixed height try setting the width to 100% of your container and set a min-heigth:
如果您只想设置固定高度，请尝试将宽度设置为容器的 100% 并设置最小高度：
<div id="chartGift" style="width: 100%; min-height: 400px"></div>
It worked for me! Plus, if you want to make sure the graph is responsive, you can know when the window is resized and force the to resize, too. Like this:
它对我有用！另外，如果您想确保图形具有响应性，您可以知道何时调整窗口大小并强制调整大小。像这样：
$(window).on('resize', function(){
if(chart != null && chart != undefined){
chart.resize();
}
});
Hope it helped!
希望有帮助！
回答by Szymon Perski
I found solution in buyed admin template. There was solution with initializing charts after content is loaded. Here is working example:
我在购买的管理模板中找到了解决方案。有在内容加载后初始化图表的解决方案。这是工作示例：
$(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 for chart container is: style="height: 400px; width: 100%; It is important, when you are using echart toolbox. It likes to go outside of container.
图表容器的样式是： style="height: 400px; width: 100%; 很重要，当你使用echart工具箱时，它喜欢在容器之外。
I hope it helps :)
我希望它有帮助:)
